Question

所以我期待让我的网站设计在IE上工作的问题，但不是FF。但经过一些调查后，我将其缩小到这个简单的测试用例。

<head>
<meta http-equiv="Content-Language" content="en-gb" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Test</title>
</head>

<body bgcolor="#ff0000" style="margin:0px">

<div style="position: absolute; width: 50%; height: 100%; top: 0%; left: 0%; z-index:-1;background-color: 96C3FF"></div>
<div style="position: absolute; width: 50%; height: 100%; top: 0%; left: 50%; z-index:-1;background-color: BEC0C2"></div>

<div style="border:solid 10px black; height:50%; width:50%"></div>

</body>
</html>

在Chrome中它很好，并且正文上的边距变化使其在IE8中看起来相同。但是在FF3中没有显示两个div，只是红色背景上的黑色矩形。

如果删除z顺序，100％高度div会出现在FF中，但会出现在黑色div上。

为什么呢？我想要这样做的原因在这个剥离的例子中并不明显，但我怎样才能使它工作？

编辑：我没有doc-type。完全粘贴到文件。我想这是其他问题之一。背景是重要的部分，第3个div就是要绘制其他东西。在IE8 / Chrome中，您会看到灰色/蓝色背景，在FF3中只是红色背景。

什么是固定解决方案，包括meta / doc-type修复？

Answer 1

首先，你测试时是否使用了DOCTYPE标志？您应该添加您的网站使用的任何DOCTYPE以获得有用的结果。添加DOCTYPE，IE将开始像Firefox一样（假设您使用正确的doc类型）。

有一点不同之处不在于z-index ......浏览器给你的边框提供了不同的高度。把东西放进去，或者将它的高度设置为非相对值，它们将开始看起来相同（给定我拥有的doc类型）。

我为我的测试添加了DTD XHTML 1.0 Transitional文档类型。

我认为Firefox表现正常。具有-1 z-index的元素不显示，因为它们位于body标记内。此外，由于您的body标签没有设置高度，因此在包含的元素上设置相对高度是没有意义的。在body标签上设置固定高度，或将html和body标签设置为100％高度。

Answer 2

Firefox正在显示div，但它们没有着色，因为您的颜色说明符不正确。

<div style="position: absolute; width: 50%; height: 100%; top: 0%; left: 0%; z-index:-1;background-color: 96C3FF"></div>
<div style="position: absolute; width: 50%; height: 100%; top: 0%; left: 50%; z-index:-1;background-color: BEC0C2"></div>

尝试：

<div style="position: absolute; width: 50%; height: 100%; top: 0%; left: 0%; z-index:-1;background-color: #96C3FF"></div>
<div style="position: absolute; width: 50%; height: 100%; top: 0%; left: 50%; z-index:-1;background-color: #BEC0C2"></div>

注意颜色中的＃。

z-index在FF3中无法正常工作，适用于IE＆amp;铬

2 个答案: