我有一个响应式图像，它会在悬停时转换。当图像宽度为 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;
}
最佳答案
这是一个使用 firefox 的已知错误，该问题已被提出 here
这是 Firefox Bug Report 的链接
明显的修复:
将 box-shadow: #000 0em 0em 0em; 应用于 css img 标签
关于html - 为什么这张图片在悬停时会调整大小，当它小于 100% 宽时(在 FF21 中)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17088642/