3

我有一个响应式图像，它在悬停时转换。当图像为 100% 宽度时，悬停过渡效果很好。但是，在 FF21 中，当您将浏览器窗口缩小到图像开始缩小的大小，然后将鼠标悬停在图像上时，在某些尺寸下，（背景图像）会有一个小的但可察觉的向上移动。这是一个非常小的转变，并且它不会发生在每个宽度上（奇怪的是）。

以下两种状态的屏幕截图（没有悬停的亮区和有悬停的暗区）。该错误在“x”处最为明显。效果只发生在某些宽度（不是全部）并且非常小。但是，它显然就在那里。

错误示例

我也尝试过 IE 和 Chrome，但它们没有显示这种行为。所以它似乎是 FF 特定的。看起来它正在将图像的大小调整为低 1 像素。有谁知道这是为什么，以及如何解决？（下面的jfiddle链接，您可以自己查看）

http://jsfiddle.net/t3Djd/1/

HTML

<body>
  <figure>
      <h2><a href="#">Title</a></h2>
      <a href="#"><img src="http://placehold.it/500x450" /></a>
  </figure>
</body>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

html, body {
    width: 100%;
    font-size: 100%;
}

/*========================================
============== CENTER IMAGES =============
========================================*/

body {
    text-align: center;
}

/*========================================
=========== RESPONSIVE IMAGES ============
========================================*/

figure, figure > a, img {
    max-width: 100%;
}

/*========================================
============ GENERAL STYLING =============
========================================*/

figure h2 {
    text-align: center;
    font-style: italic;
    font-size: 1.75rem; /* 16 x 1.75 = 28px */
    font-weight: normal;
}

figure h2 a {
    text-decoration: none;
    color: black;
}

/*========================================
============ HOVER TRANSITION ============
========================================*/

figure {
    padding: 1rem 1rem 2rem;
    position: relative;
    display: inline-block;
}

figure h2 {
    margin: -1rem 0 0 -1rem; /* offset the figure padding */
    z-index: 2;
    position: absolute;
    line-height: 0;
    width: 100%;
    top: 50%;
}

figure h2 a {
    z-index: 1;
    color: rgba(255,255,255,0);
    -webkit-transition: color 0.3s ease-in-out;
    -moz-transition: color 0.3s ease-in-out;
    -o-transition: color 0.3s ease-in-out;
    transition: color 0.3s ease-in-out;
}

figure:hover h2 a {
    color: rgba(255,255,255,1);
}

figure > a {
    display: inline-block;
    line-height: 0;
    background: black;
    box-shadow: 0 2px 5px black;
}

img {
    opacity: 1;
    -webkit-transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
}

figure:hover img {
    opacity: 0.5;
}
4

1 回答 1

6

这是一个使用 firefox 的已知错误，问题已在此处提出

这是Firefox 错误报告的链接

明显修复：应用于box-shadow: #000 0em 0em 0em;cssimg标签

于 2013-06-13T13:57:12.563 回答