Question

我有一个容器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。

Answer 1

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

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前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改变它。每个方面的明确定义是克服这些小问题的最佳方法。

希望这有帮助， FuzzicalLogic

Answer 2

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

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

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

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

Answer 3

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

感谢您的建议。

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

3 个答案: