图像无缘无故悬停时会缩小 1 个像素

Question

在此页面的左侧边栏上，有一些图像的不透明度在悬停时从 1 切换到 0.95：

#div_port_left a img:hover {
    opacity: 0.95; 
}

但出于某种原因，图像不仅在悬停时变得不那么明显，而且它们似乎也会缩小或产生类似效果。我不明白是什么导致了这种效果。我只想改变不透明度，没有别的。

Answer 1

您看到的效果实际上不是缩小，而是浏览器在稍微透明的图像上做出的决定与在完全不透明的图像上略有不同。 源图像（选择第一个）是 131x91，但您要求浏览器将其缩小到 88x60。 这意味着它将不得不丢弃一些像素。 现代浏览器都试图应用过滤器以使缩放看起来更好，但它并不完美。 要解决此问题，请缩放图像以匹配空间的尺寸，然后浏览器不会弄乱它。

Answer 2

您是否在其他浏览器中尝试过？

可能是浏览器的默认 CSS 在未悬停时具有图像边框。不太可能，但有可能。我建议您考虑使用重置.css。我自己使用它，发现它有很大帮助，尤其是在跨浏览器兼容性方面。

Answer 3

我在Firefox 24.0和Internet Explorer 10中尝试过这个，都没有缩小图像。

但是，某些浏览器可能会使用不同的方法来绘制应用了一些效果的图像，因此在某些特定浏览器中，您可能会遇到像素差异。

您可以尝试默认应用不可见效果，以查看在看到像素差异的浏览器中是否存在差异：

#div_port_left a img {
  opacity: 0.99999; 
}

由于像素差异仅出现在某些浏览器中，因此您可以选择仅将其作为浏览器差异接受。