CSS 不透明度 + 调整大小导致图像在 firefox 37 上重复

Question

每当我使用影响图像或背景图像的 CSS 不透明度时，我在 Firefox 37.0.2 上遇到了一个恼人的问题。它会导致重复显示一个图像而不是显示其他图像。我不知道我是否清楚，但我在网上找不到任何关于它的讨论。

显然我在很多网站上都注意到了这种行为，因为这个问题非常基本，所以我猜它只会以某种方式影响我(可能是特定的插件或设置？)但我必须确定并问你。

这是一个关于它的 fiddle :jsfiddle

<div class="a">
<div><img src="http://lorempixel.com/400/400" /></div>
<div><img src="http://lorempixel.com/401/400" /></div>
...
</div>

<div class="b"><!-- test div without opacity -->
<div><img src="http://lorempixel.com/400/400" /></div>
<div><img src="http://lorempixel.com/401/400" /></div>
...
</div>

CSS:

div div{
    width:20%;
    float:left    
}
div div img{
    width:100%;    
}
div.a div img{
    opacity:.4
}

以及我从 Firefox 截取的屏幕截图:screenshot

它在我测试过的任何其他浏览器中都如预期的那样完美运行。

编辑

感谢 CairoCoder 的回复，我无意中发现它只影响缩小尺寸以适应包装 div 的图像。

因此，不透明度 + 缩小尺寸是产生我的问题的两个属性。

我仍然不知道为什么它会这样，或者是否只是我自己的 Firefox 有问题。

最重要我不希望人们在这个问题上浪费太多时间。我主要关心的是知道这个问题是否已知、已复制/已报告并且应该被修复，或者它是否只是我的 Firefox 表现得很奇怪。如果之前没有人经历过这种特定行为 - 例如屏幕截图中显示的 - 那么我将忽略它。

Answer 1

用max-height: 定义 围绕图像/ slider 元素的 div 包装器设置和 overflow-x: hidden;也给元素你的造型selectors而不是使用全局 <div>和 <a>标签。

编辑:

这个问题的根源在于你的图片来自哪里；没有其他的。你没有文件类型。我没有看到 .jpg 或 .png 等。当我删除一个时，它们似乎动态地填充在某个地方，另一个出现了。您还有两行名称完全相同的“图像”，进一步证明了我的观点。如果您需要使用实际图像，请检查这些图像路径。下载它们，在本地托管它们，确保它们是正常保存的图像，并定义了扩展名 .jpg 等，正确调用它们，您的问题就会消失。

但是当样式变得令人困惑时，尤其是使用伪选择器和继承时，还要添加全局标记用法，这部分只是一个建议。