Why with this css the background-color attribute doesn't work?_问答_开发者

Why with this css the background-color attribute doesn't work?

开发者 https://www.devze.com 2023-01-19 17:01 出处：网络

<body> <div> <div id=\"ROOT\" > <div id=\"ROOT_0\" > header </div> <div id=\"ROOT_1\" >

<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{back开发者_C百科ground-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 get the right background. If i try on Chrome or firefox they don't get the background. Why? Cheers

Floated elements don't influence the height of their container. You are experiencing a bug in IE because you are not triggering Standards mode is a reasonably modern Doctype.

See complex spiral for an explanation as to why things work this way and Ed Elliot's blog for a number of better ways to count floats in the height.

Try to assign height to the divs.