Chrome：框阴影未显示在具有背景的图像上答案

【问题标题】：Chrome: Box-shadow not shown on img with backgroundChrome：框阴影未显示在具有背景的图像上
【发布时间】：2012-06-25 05:11:44
【问题描述】：

我的网站上有图片，带有 background（加载指示器，但在任何背景下都会发生），半年前效果很好。但是几个月以来，Chrome 不再显示 box-shadow。

我已经设置了一个小提琴来尝试将其简化为必需品。它只发生在某些图像上（可能与透明度有关？），有时它只发生在图像被重绘（选择、移动）之后。当我移除背景时，阴影是可见的。

http://jsfiddle.net/PJ7f5/5/

有人知道吗？

【问题讨论】：

考虑将此错误报告给 Chrome 开发人员。（它是在 Chrome 19 中引入的。以前的 Chrome 18 可以正常工作。）
code.google.com/p/chromium/issues/detail?id=134243
+1 此外，对于您可能感兴趣的完全不同的标记方法，请查看jsFiddle
为了确保jsFiddle 在图像上包含文本，以防这种可能性未被实现。

标签： google-chrome background image css

【解决方案1】：

更新 2 请参阅下面的@arttronics 评论。

http://jsfiddle.net/z89x9/37/

.img {
    background-color: red;
    width:100px;
    height:100px;
    box-shadow:2px 2px 8px rgba(0, 0, 0, 1);
    padding-left: 1px;
    margin-left: -1px;
}
.img:hover {
    margin:2px;
}

【讨论】：

这行得通，但为什么呢？阴影没有嵌入，为什么 img 在它上面？在 chrome 中，我的小提琴显示阴影，直到它被选中。顺便说一句，你没有保存你的小提琴
我尝试了各种组合并注意到了这一点。我检查了计算的样式，一切似乎都很好。不能说我理解，但添加 padding: -1px 效果更好。看一下最新版本jsfiddle.net/z89x9/8
你以前的悲伤尝试对我来说是 +1 加边距。你可以拥有这个jsFiddle。 padding 不能有负值，margin 可以。
@Thomas：恕我直言，我刚刚为柯克的回答做了一点改进，他努力为您创建了 2 个解决方案。为此，请接受他的。 附言很快我将能够编辑答案并以这种方式做出贡献，因为这并不总是关于代表，而是使现有答案更好。
谢谢柯克。为了澄清起见，之前的冗长 hack 实际上是合法的，但可以这样看待：<div class="shadow"><img src="image.jpg" /></div>。也就是说，box-shadow 与div tag 一起使用时可以正常工作，因为Chrome 会尊重box-model。一旦 Chrome 修复了 img tag 的当前错误，则不再需要此解决方法答案。可以肯定的是，在这种特殊情况下，Chrome v19 不尊重 img tag 是 box model 元素。