解决各大浏览器兼容问题hack方法总结

解决各大浏览器兼容问题hack,IE6/ IE7/ IE8/ IE9/ Firefox/ Opera/ Webkit/ Chrome/ Safari.

方法一

 1 color:red; /* 所有浏览器都支持 */
 2 color:red !important; /* 除IE6外 */
 3 _color:red; /* IE6支持 */
 4 *color:red; /* IE6、IE7支持 */
 5 +color:red; /*IE7支持*/
 6 *+color:red; /* IE7支持 */
 7 color:red\9; /* IE6、IE7、IE8、IE9支持 */
 8 color:red\; /* 针对所有IE */
 9 color:red\0; /* IE8、IE9支持 */
10 color:red\9\0; /*IE9支持*/
11 /* webkit and opera */
12  @media all and (min-width: 0px){ div{color:red;} }
13 /* webkit */
14  @media screen and (-webkit-min-device-pixel-ratio:0){ div{color:red;} }
15 /* opera */
16  @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-
17 
18 ratio:0) { div{color:red;} }
19 /* firefox * /
20  @-moz-document url-prefix(){ div{color:red;}} /* all firefox */
21 
22  html>/**/body div, x:-moz-any-link, x:default {color:red;} /* newest firefox */
23 }
24 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解决。两种办法各有利弊,选择的时候应根据具体需要采用最适当的方法。
posted @ 2012-04-03 14:48  yunxiange  阅读(348)  评论(0编辑  收藏  举报