css - 图像无故悬停时缩小 1 个像素

Question

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

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

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

Answer 1

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

Answer 2

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

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

Answer 3

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

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

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

#div_port_left a img {
  opacity: 0.99999; 
}

由于像素差异仅发生在某些浏览器中，您可能会选择将其视为浏览器差异。