Question

您可以保存以下代码并进行试用。

在 firefox 中，它是完整的浏览器灰色，但在 IE （确切地说是IE7）中，它无效。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style text="text/css">
.overlay {  
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1000;
    background-color:grey;
}
</style>
</head>
<body style="font-size:62.5%;">

<div class="overlay"></div>

</body>
</html>

Answer 1

IE无法识别CSS颜色名称grey。尝试使用十六进制颜色，例如#ccc，它将起作用。或者，使用gray（带有'a'，而不是'e'）也可以。

请注意，这符合标准，因为W3C没有说明支持gray的替代拼写，而gray确实是颜色名称according to the spec for CSS3。

Answer 2

尝试将此添加到您的样式defs：

html, body {
    height: 100%;
}

在IE上，body默认情况下不会延长视口的整个高度，而且叠加层的容器为body，所以......

编辑刚试过，你的工作没有上述，必须是因为身体是静态定位的。无论如何，John Feminella想出来了;看到他的回答。

为什么这个小的HTML / CSS片段不能在IE中产生预期的结果？

2 个答案: