解决各大浏览器兼容问题hack，IE6/IE7/IE8/IE9/Firefox/Opera/Webkit/Chrome/Safari
时间：2011-09-20作者：leo.sun分类：产品评论：6
解决各大浏览器兼容问题hack，IE6/ IE7/ IE8/ IE9/ Firefox/ Opera/ Webkit/ Chrome/ Safari.
浏览器兼容是网站前端页面制作最基本的问题，通常IE6最容易出现不兼容的问题。有时候像火狐、谷歌这些浏览器也会出现不兼容的情况，这里做一个相对全面的浏览器兼容hack总结，欢迎补充。
color:red; /* 所有浏览器都支持 */
color:red !important; /* 除IE6外 */
_color:red; /* IE6支持 */
*color:red; /* IE6、IE7支持 */
+color:red; /*IE7支持*/
*+color:red; /* IE7支持 */
color:red\9; /* IE6、IE7、IE8、IE9支持 */
color:red\; /* 针对所有IE */
color:red\0; /* IE8、IE9支持 */
color:red\9\0; /*IE9支持*/
/* webkit and opera */
@media all and (min-width: 0px){ div{color:red;} }
/* webkit */
@media screen and (-webkit-min-device-pixel-ratio:0){ div{color:red;} }
/* opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-
ratio:0) { div{color:red;} }
/* firefox * /
@-moz-document url-prefix(){ div{color:red;}} /* all firefox */
html>/**/body div, x:-moz-any-link, x:default {color:red;} /* newest firefox */
}
body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持 */
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->
<!–[if IE 7]> = 等于 IE7
<!–[if lt IE 8]> = 小于 IE8（就是 IE7 或以下了啦）
<!–[if gte IE 8]> = 大于或等于 IE8
<meta http-equiv="x-ua-compatible" content="ie=7" />
把这段代码放到<head>里面，在ie8里面的页面解析起来就跟ie7一模一样的了
<!–[if IE]>
<link rel=”stylesheet” href=”/ie-all.css” type=”text/css” media=”screen” />
<![endif]–>
<!–[if lt IE 8]>
<link rel=”stylesheet” href=”/ie.css” type=”text/css” media=”screen” />
<![endif]–>
<!–[if IE 7]>
<link rel=”stylesheet” href=”/ie7.css” type=”text/css” media=”screen” />
<![endif]–>
<!–[if IE 6]>
<link rel=”stylesheet” href=”/ie6.css” type=”text/css” media=”screen” />
<![endif]–>
上面提到两种解决各大浏览器兼容问题的办法，即：判断浏览器针对不同浏览器写不同的CSS文件和在同一个CSS文件中用各种浏览器的hack解决。两种办法各有利弊，选择的时候应根据具体需要采用最适当的方法。
两种写法的特点：
使用hack：编写和调试的时候比较方便；引用的样式文件少，能减少http请求数（http请求数可理解为浏览器从远程服务器上下载文件的数量）。但同时会造成代码冗余，影响浏览器渲染。这种方法比较适合解决小范围的兼容性问题。比如某页面在IE6下不兼容，只需要几行代码就能完美解决就可以使用此方法。
使用条件判断：能有效减少代码冗余，提高浏览器的解析渲染的速度。很多制作人员比较推崇这种写法，原因是这种写法更显得规范。但调试维护稍显麻烦，比如某个页面只在火狐浏览器中不兼容，只需要稍作调整就可以解决，就没有必要再单独为火狐写一个css文件。
也可以采用两种方法并用的方式解决浏览器兼容问题，例如专门为IE写一个CSS文件，然后再在这个CSS文件中针对不同版本的IE浏览器使用相应的hack。
当然解决浏览器兼容的方法很多，可以灵活运用。最好的方式是在编写的时候就避免使用一些可能会不兼容的写法，当然要做到这一点需要有大量的经验积累才能做到。
（原：孙迁 Leo.sun from http://www.asucd.com）
752
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
