z-index not working properly in FF3, works in IE & Chrome_问答_开发者

z-index not working properly in FF3, works in IE & Chrome

开发者 https://www.devze.com 2022-12-17 07:34 出处：网络

So I was expecting problems getting my site design working on IE, but not FF. However after some investigation I\'ve narrowed it down to this simple test case.

相关专题：css

So I was expecting problems getting my site design working on IE, but not FF. However after some investigation I've narrowed it down to this simple test case.

<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>

In 开发者_JAVA技巧Chrome it's fine, and the margin change on body makes it look identical in IE8. But in FF3 the two divs are not shown, just the black rectangle on a red background.

If I remove the z-order thing, the 100% height divs appear in FF but on top of the black div.

Why? The reason I want to do this is not obvious in this stripped example, but how can I make it work?

EDIT: I have no doc-type. Copy-paste to a file exactly. I guess this is one of the other problems. The background is the important part, the 3rd div is just to have something else drawn. In IE8/Chrome you see a grey/blue background, in FF3 just a red background.

What would be a fixed solution, including meta/doc-type fixes?

First, were you using a DOCTYPE flag when you test this? You should add whatever DOCTYPE your site is using to get useful results. Add the DOCTYPE and IE will start to act like Firefox (assuming you use the right doc type).

One thing thats difference is not due to z-index... The browsers are giving your bordered box a different height. Put something in it, or set its height to a non-relative value and they will start to look the same (given the doc type I have).

I added the DTD XHTML 1.0 Transitional doctype for my tests.

I think Firefox is behaving correctly. The elements with -1 z-index don't show because they're within the body tag. Also, since your body tag doesn't have a height set, setting a relative height on the contained elements is kind of meaningless. Set a fixed height on the body tag, or set the html and body tag to have 100% height.

Firefox is displaying the div's but they aren't colored, because your color specifiers are incorrect.

<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>

Try:

<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>

Note the #'s in the colors.