Почему с этим CSS не работает атрибут background-color? - PullRequest
0 голосов
/ 13 октября 2010
<body> 
    <div> 
        <div id="ROOT" > 
            <div id="ROOT_0" > 
                header  
            </div> 

            <div id="ROOT_1" > 
                main
            </div

            <div id="ROOT_2" > 
                footer
            </div> 
        </div> 
    </div>
</body> 

html {height:101%;}
body {background:#FFFFFF;}

#ROOT{ background-color:#666666; width:980px; margin-left:auto; margin-right:auto;}    
#ROOT_0{background-color:#FF9933; width:970px; text-align:center; float:left; margin-top:5px; margin-bottom:5px; margin-left:5px; margin-right:5px;}    
#ROOT_1{width:980px; text-align:center; float:left;}    
#ROOT_2{background-color:#FF9933; width:970px; text-align:center; float:left; margin-top:10px; margin-bottom:5px; margin-left:5px; margin-right:5px;}

IE получает правильный фон. Если я попробую Chrome или Firefox, они не получат фон. Зачем? Приветствия

Ответы [ 2 ]

4 голосов
/ 13 октября 2010

Плавающие элементы не влияют на высоту их контейнера. Вы столкнулись с ошибкой в ​​IE, потому что не запускаете стандартный режим - достаточно современный Doctype.

См. сложная спираль для объяснения того, почему все так работает, и в блоге Эда Эллиота для ряда лучших способов подсчета поплавков в высоте.

0 голосов
/ 13 октября 2010

Попробуйте назначить высоту элементам div.

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