css兼容（Css兼容）.doc

css兼容（Css兼容） CSS on all browsers compatible is already commonplace problem, the network tutorials are everywhere. The following content is not too much novelty, purely personal summary, hoping to have some help for beginners One, CSS HACK The following two approaches can almost solve all HACK. today 1, important! With the support of IE7 for important, the important method is now only for IE6s HACK. (note the wording. Remember that the declaration location needs to be advanced.) style #wrapper { Width: 100px important; / * * / IE7+FF! Width: 80px IE6; / * * / } /style 2, IE6/IE77 to FireFox *+html and *html are IE - specific tags, and Firefox does not support them for a while, and *+html is a IE7 - specific tag style #wrapper { #wrapper {width: 120px;} / * * / FireFox *html #wrapper {width: 80px;} / * IE6 * fixed *+html #wrapper {width: 60px;} / * IE7 * fixed, pay attention to the order } /style Be careful: *+htmls HACK for IE7 must guarantee that the top of the HTML has the following declarations: DOCTYPE, HTML, PUBLIC, -//W3C//DTD, HTML, 4.01, Transitional//EN, /TR/html4/loose.dtd Two, universal float closed For the clear float principle, see [How To, Clear, Floats,, Without, Structural, Markup] The following code will join Global CSS, to close div and class= Clearfix can be tested. style Clear Fix / * * / .clearfix:after { Content:; Display:block; Height:0; Clear:both; Visibility:hidden; } .clearfix { Display:inline-block; } Hide from IE Mac / * * / .clearfix {display:block;} End hide from IE Mac * / / * End of Clearfix / * * / /style Three, other compatible skills 1, setting padding under FF causes width and height to increase, but IE does not. (available, important, DIV) 2, centering 1) vertically centered. Set line-height to the same height as the current div, and then pass the vertical-align: middle. (note that the contents dont line up) 2) horizontally centered. Margin: 0 Auto; (of course not almighty) 3, if you need to add a style to the contents of the a