У меня есть дизайн, который нуждается в двух фоновых изображениях и должен работать в IE. Поэтому я решил поместить одно изображение в тег html, а другое - в тег body. Итак, моя страница выглядит так
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
</head>
<body>
<p>Lorem...</p>
</body>
</html>
Тогда очень простой CSS, как это
html { background:url(../img/bg.jpg) top center no-repeat #0094d4; margin:0; padding:0; }
body { background:url(../img/bgRep.png) repeat-x; margin:0; padding:0; }
Единственный браузер, который правильно отображает это IE7. Opera, Chrome, FF все размещают поле размером ~ 20px вверху. Я могу удалить это поле, добавив несколько хакерских CSS, например:
html { background:url(../img/bg.jpg) top center no-repeat #0094d4; position:relative; }
body { background:url(../img/bgRep.png) repeat-x; margin:0; padding:0; top:0; position:absolute; width:100%; }
Однако, почему это не работает с самого начала, зачем мне дополнения? Это ошибка или ошибка по дизайну?
РЕДАКТИРОВАТЬ : Кажется, это ошибка. Когда я удаляю теги <p>, он действует правильно, но с ними - нет.