Почему добавление DOCTYPE влияет на мой CSS? - PullRequest
Новая
       1

Почему добавление DOCTYPE влияет на мой CSS?

2 голосов
/ 03 августа 2010

Мне интересно, почему следующий HTML / CSS отображается нормально, пока я не введу doctype: 

<body style="margin:0; padding:0; background-color:#eeeeee"></body>

<div id="HeaderContainer" style="background-color:#eeeeee; color:Black; border-bottom:1px solid #cccccc; height:60px; margin:0px"></div>

<div style="width:100%; background-color:White; margin:0px; padding:0px">

<div style="margin:30px; width:840px; margin:10px auto; margin-top:50px; background-color:#cc0000;">

text

</div>

</div>


</div>

</body>

Мне нужен заголовок (серая полоса) с темно-серой рамкой внизу.Ниже я хочу, чтобы мой контент, который входит в большой 100% ширины, является белым (так как страница серого цвета).Приведенный выше код выглядит хорошо, но если я добавлю эту строку вверху: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Поле на самом внутреннем элементе div изменится с белого на серый, поэтому страница будет выглядеть неправильно.

Можеткто-нибудь объяснит почему?Я тестирую это с помощью IE8, но в Chrome он выглядит одинаково.

Описание изображения:

woo

Ответы [ 3 ]

3 голосов
/ 03 августа 2010

Добавление объявления DOCTYPE заставляет браузер отображать страницу в [почти] стандартном режиме вместо режима причуд .

0 голосов
/ 03 августа 2010

Это ужасно сформированный XHTML.

Проблема, на которую вы ссылаетесь, на самом деле является проблемой веб-набора.Когда вы используете поле для элемента, оно использует фон из родительского элемента в поле поля.Вместо этого используйте padding, чтобы обойти это: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title></title>
    </head>
    <body style="margin:0; padding:0; background-color:#eee">
        <div id="HeaderContainer" style="background-color:#eee; color:#000; border-bottom:1px solid #ccc; height:60px; margin:0px"></div>
        <div style="width:100%; background-color:#fff; margin:0px; padding:0px">
            <div style="width:840px; margin:0 auto; padding-top:10px; background-color:#c00;">
                text
                <br /><br /><br />
            </div>
        </div>
    </body>
</html>
0 голосов
/ 03 августа 2010

вы закрываете тег body в строке 1, а затем снова в последней строке.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...