我有一个响应式图像，它在悬停时转换。当图像为 100% 宽度时，悬停过渡效果很好。但是，在 FF21 中，当您将浏览器窗口缩小到图像开始缩小的大小，然后将鼠标悬停在图像上时，在某些尺寸下，（背景图像）会有一个小的但可察觉的向上移动。这是一个非常小的转变，并且它不会发生在每个宽度上（奇怪的是）。
以下两种状态的屏幕截图（没有悬停的亮区和有悬停的暗区）。该错误在“x”处最为明显。效果只发生在某些宽度（不是全部）并且非常小。但是，它显然就在那里。
我也尝试过 IE 和 Chrome，但它们没有显示这种行为。所以它似乎是 FF 特定的。看起来它正在将图像的大小调整为低 1 像素。有谁知道这是为什么，以及如何解决？（下面的jfiddle链接，您可以自己查看）
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;
}