Так что я ожидал проблем с настройкой дизайна моего сайта на 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% отображаются в FF, но поверх черного деления.
Почему? Причина, по которой я хочу сделать это, не очевидна в этом разобранном примере, но как я могу заставить его работать?
РЕДАКТИРОВАТЬ: У меня нет типа документа. Скопируйте и вставьте в файл точно. Я думаю, это одна из других проблем. Фон является важной частью, 3-й div - это просто нарисовать что-то еще. В IE8 / Chrome вы видите серый / синий фон, в FF3 просто красный фон.
Каким было бы фиксированное решение, включая исправления типа meta / doc?