div+css布局兼容（Div+css layout compatible）.doc

div+css布局兼容（Div+css layout compatible） Div+css layout, web compatible, IE, firefox: Such as: div class= box div class=, box_top, /div div class=, box_mid, /div div class=, box_bot, /div div In general box in box_mid with content and to make it height:auto! Important; min-height: is a fixed value; but for the background image of box box_mid in the background is flat down as the content and how much growth. If we want to leave the contents of the box_mid in a certain distance from the box_top header, we need to set the margin:20px auto, but this will leave the middle background graph unconnected with the background map. Can be changed to: Margin:0 Auto; padding-top:20px; padding_bottom:20px; Thus, the whole box background diagram will be linked together. Following references: All browsers are generic (the main use of IE6 IE7 FF) Height: 100px; Dedicated IE6 _height: 100px; Dedicated IE6 *height: 100px; Dedicated IE7 *+height: 100px; IE7, FF share Height: 100px! Important; One, CSS compatible The following two approaches can almost solve all of todays compatibility 1, important! (not recommended, safest with one of the following) With the support of IE7 for important, the important method is now only compatible with IE6. (note the wording. Remember that the declaration location needs to be advanced.) Code: style #wrapper { Width: 100px important; / * * / IE7+FF! Width: 80px IE6; / * * / } /style 2, IE6/IE77 for FireFox from for Firefox IE6 IE7s CSS Style *+html and *html are IE - specific tags, and Firefox does not support them for a while, and *+html is a IE7 - specific tag Code: style #wrapper {width: 120px;} / * * / FireFox *html #wrapper {width: 80px;} / * IE6 * fixed *+html #wrapper {width: 60px;} / * IE7 * fixed, pay attention to the order /style Be careful: *+html compatibility with IE7 must be guaranteed at the top of the HTML with the following declarations: Code: DOCTYPE, HTML, PUBLIC, -//W3C//DTD, HTML, 4.01, Transitional//EN, /TR/html4/loose.dtd Two, un