为什么这个图像在悬停时会调整大小，当它小于 100% 宽时（在 FF21 中）？答案

【问题标题】：Why does this image resize on hover, when it is less than 100% wide (in FF21)?为什么这个图像在悬停时会调整大小，当它小于 100% 宽时（在 FF21 中）？
【发布时间】：2013-06-09 22:21:22
【问题描述】：

我有一个响应式图像，它会在悬停时转换。当图像为 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;
}

【问题讨论】：

停止删除您的问题并重新发布它们
@Pete，我重新发布了它，因为我改变了很多，以至于我认为它作为一个新问题会更清楚。以为会更整洁。而且我不需要Pete的态度，如果你有话要说，你可以很好地告诉我。
@Pete，虽然有点粗鲁。当您命令人们在互联网上做事时，只需在前面加上请。它会让这一切看起来更美好。

标签： html css responsive-design

【解决方案1】：

这是一个已知的使用firefox的bug，这个问题已经被提出here

这里是Firefox Bug Report的链接

明显的修复：将box-shadow: #000 0em 0em 0em; 应用于css img 标签

【讨论】：

感谢您的回答。我还看到，当悬停时出现错误时，图像底部会出现黑色边框。我会看看我能不能弄清楚这是为什么..
可能是调整大小时的舍入错误。这可以解释为什么它只出现在某些宽度（小于 100%），以及为什么它在底部只有 1px。不明白为什么它只会在悬停时发生..
已知问题：stackoverflow.com/questions/11403662/…
啊哈！哇，这是一个不起眼的错误。我尝试将box-shadow: #000 0em 0em 0em; 应用到<img>，并解决了它。非常感谢迪伦！