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

最新推荐文章于 2025-08-14 16:45:51 发布

罢懂

最新推荐文章于 2025-08-14 16:45:51 发布

阅读量1k

点赞数

分类专栏： div+css 文章标签： ie 浏览器 stylesheet firefox html class

div+css 专栏收录该内容

5 篇文章

订阅专栏

本文总结了用于解决各大浏览器（包括IE6/7/8/9、Firefox、Opera、WebKit、Chrome、Safari）兼容问题的hack技巧，包括在同一个CSS文件中使用不同浏览器的hack代码和为不同浏览器编写特定的CSS文件。提供了适用于前端开发的解决方案，确保网站在多种浏览器下都能正常显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解决各大浏览器兼容问题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解决。两种办法各有利弊，

选择的时候应根据具体需要采用最适当的方法。