css浏览器兼容问题(ie6ie7firefox)解决方案汇集及实例纵览(持续更新)（CSS browser compatibility issues (ie6ie7firefox) solution collection and example overview (continuous update)）.doc

css浏览器兼容问题(ie6ie7firefox)解决方案汇集及实例纵览(持续更新)（CSS browser compatibility issues (ie6ie7firefox) solution collection and example overview (continuous update)） 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 tag, you need to set up display: block; (commonly used in navigation tags) 4, the dif