html - 透明的 png 背景在 IE7 中产生奇怪的效果(但仅在某些情况下)

Question

在 IE 兼容模式/IE7 中，我遇到了一些非常奇怪的副作用。

我在我网站的内容 div 上使用透明的 png 背景 - 白色，在页面背景图像的顶部，以便它略微显示。

我认为自己可以胜任 HTML 和 CSS，但终究无法解决这个问题。

有问题的网页是http://www.freezeframedesign.com/blog .它仅发生在 IE7 和 IE 兼容模式下 - 您会看到每篇文章的背景与网站上所有其他页面的外观相比，看起来好像背景图像在其自身之上分层。

元素的 CSS 是

.studioarticle{
    padding:20px;
    background:url(/siteimages/back_white.png);
    -moz-box-shadow:0px 0px 4px #000;
    -webkit-box-shadow:0px 0px 7px -2px #111;
    box-shadow:0px 0px 4px #000;
}

(我知道 box-shadow 属性在这里不起作用)

这些都是非常标准的东西。如果我使用 IE 开发人员检查器并取消粘贴背景图像，它就会完全消失，所以这并不是说另一个元素也以某种方式获得了背景图像。

拜托，如果有人可以查看源代码，看看他们是否能找到问题的根源，或者如果有人以前遇到过这个问题，请告诉我我可以做些什么来解决这个问题!

我知道现在使用 IE7 的人不多，但作为一名网页设计师，我想确保我的网站仍然适合所有少数人。

非常感谢您的帮助!

Answer 1

您在 studiotitle 类中有一个边距 -7px 0 0。把它拿出来，它就会起作用。

根据我的经验，边距或填充的负数始终是一个大危险信号。