Div 在 IE 7 中使用正文的背景颜色答案

【问题标题】：Div is using the body's background color in IE 7Div 在 IE 7 中使用正文的背景颜色
【发布时间】：2011-12-11 06:17:55
【问题描述】：

我有一个容器 div，里面有更多 div 用于幻灯片效果。 “容器” div 位于主体的背景图像之上。

正文的 CSS：

body { background: #333 url(images/bg.jpg) repeat-x top; }

问题是在 IE7 中，容器 div 的背景颜色为 #333。 Firefox 正确显示为清晰。

这是容器 div 的 CSS：

.cntdiv {
    width:100%;
    display:block;
    margin:0 auto;
    margin-top:15px;
    overflow:hidden;

    }

知道为什么它会拾取身体颜色而不是图像吗？同样，它在 Firefox 中也能正常工作。

【问题讨论】：

标签： css html internet-explorer-7 background-color

【解决方案1】：

它在 IE7 中不起作用的原因是因为您使用的是数据 URL，而 IE7 不支持它们。证明人：

http://www.caniuse.com/#search=Data%20url

对于 IE7，您必须使用条件 cmets 并调整引用背景图像的方式。如果您还不了解条件 cmets，这里有一个快速简单的介绍：

http://css-tricks.com/132-how-to-create-an-ie-only-stylesheet/

【讨论】：

感谢您的建议。我已经为您提供的 CSS 技巧链接添加了书签，以解决我遇到的其他问题。但是，我确实发现问题的根源是我正在使用的一个 jquery 插件。使用不同的插件解决了我的问题。再次感谢！

【解决方案2】：

IE7 确实支持背景 URL。您说它不支持数据 URL 是正确的，但这不是数据 URL。数据 URL 的 CSS 看起来类似于：

url(data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7) .

注意关键字“data:”的使用。这里的关键是数据是字符串...不是文件。

不过，也有一些小问题。首先，URL 必须用引号引起来，如：

body { background: #333 url("images/bg.jpg") repeat-x top; }

然而，IE 对 background 短语法的解释不同，所以我发现扩展语法对 IE pre 8 错误有很大帮助。

body { background-color: #333; background-image:url("images/bg.jpg"); 
       background:repeat-x; background-position:top;
}

最后，您的容器 div 必须使用背景颜色显式定义：

.cntdiv {
    width:100%;
    display:block;
    margin:0 auto;
    margin-top:15px;
    overflow:hidden;
/* This is the line that will do it */
    background:transparent;
/* OR EVEN */
    background-color:transparent;
}

此代码在 IE7 中经过测试并正确运行，并且在其他代码中也具有相同的行为。明智地使用“透明”是很棒的。

还必须了解，您面临的问题不是错误，而是用户代理 CSS 样式。这是根据 W3C 标准，与 IE 具有的其他 div 错误不同（例如较差的 :hover 支持）。因为您没有为您的div 定义背景，所以用户代理 (IE7) 可以为所欲为。所有 HTML 元素和所有浏览器都是如此。这就是为什么按钮看起来一定的原因，除非你用 CSS 改变它。明确定义各个方面是克服此类小问题的最佳方法。

希望这会有所帮助，模糊逻辑

【讨论】：

谢谢！鉴于缺乏使用transparent，我假设（可能不正确）OP 是一个新手。我认为尽早纠正常见的误解可能是最好的。我知道如果在我还是新手的时候得到这个指导，我的生活会轻松很多。

【解决方案3】：

好的，我发现了问题。我正在使用 jquery.cycle 插件将 div 旋转到视图中。不知何故，IE7 不喜欢它。我尝试了一个不同的 jquery 插件，它运行良好。

感谢您的建议。

【讨论】：