用CSS hack技术解决浏览器兼容性问题

最新推荐文章于 2025-06-04 16:35:52 发布

转载最新推荐文章于 2025-06-04 16:35:52 发布 · 55 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/baixc/p/3526325.html

本文详细介绍了CSSHack的概念及其三种形式：CSS属性Hack、CSS选择符Hack和IE条件注释Hack。这些Hack技术主要用于解决不同浏览器之间的CSS兼容性问题。

什么是CSS Hack？

　　不同的浏览器对CSS的解析结果是不同的，因此会导致相同的CSS输出的页面效果不同，这就需要CSS Hack来解决浏览器局部的兼容性问题。而这个针对不同的浏览器写不同的CSS 代码的过程，就叫CSS Hack。

CSS Hack 形式

　　CSS Hack大致有3种表现形式：CSS属性Hack、CSS选择符Hack以及IE条件注释Hack， Hack主要针对IE浏览器。

　　1、属性级Hack：比如IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，而firefox两个都不能认识。等等

　　2、选择符级Hack：比如IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。等等

3、IE条件注释Hack：比如针对所有IE：<![endif]-->，针对IE6及以下版本：<![endif]-->，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

　　注意书写顺序：一般是将识别能力强的浏览器的CSS写在后面。通常先写FF等非IE浏览器所需样式，其次写IE8所需样式，接着是IE7的，再接着才是IE6的。

常用CSS hack

以 color:red 将字体设置为红色为例：

/* CSS属性级Hack */
color:red;    /* 所有浏览器可识别*/
_color:red;     /*  仅IE6 识别 */
*color:red;    /*  IE6、IE7 识别 */
+color:red;    /*  IE6、IE7 识别 */
*+color:red;    /*  IE6、IE7 识别 */
[color:red;    /*  IE6、IE7 识别 */
color:red\9;    /* IE6、IE7、IE8、IE9 识别 */
color:red\0;    /* IE8、IE9 识别*/
color:red\9\0;    /* 仅IE9识别 */
color:red \0;    /* 仅IE9识别 */
color:red!important; /* IE6 不识别!important 详情参见*/
-------------------------------------------------------------
/* CSS选择符级Hack */
*html #demo { color:red;}   /*  仅IE6 识别 */
*+html #demo { color:red;}  /*  仅IE7 识别 */
body:nth-of-type(1) #demo { color:red;} /* IE9+、FF3.5+、Chrome、Safari、Opera 可以识别 */
head:first-child+body #demo { color:red; } /* IE7+、FF、Chrome、Safari、Opera 可以识别 */
:root #demo { color:red\9; } : /* 仅IE9识别 */
--------------------------------------------------------------
/* IE条件注释Hack　详情参见 */
<!--[if IE]>此处内容只有IE可见<![endif]--> 
<!--[if IE 6]>此处内容只有IE6.0可见<![endif]--> 
<!--[if IE 7]>此处内容只有IE7.0可见<![endif]--> 
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
<!--[if !IE]>此处内容只有非IE可见<![endif]-->