CSS Hack 剧中对其，技术背后的创意与挑战？

CSS Hack 是一种在网页开发中常用的技术，用于解决不同浏览器之间的兼容性问题，由于不同浏览器对 CSS 的解析和渲染可能存在差异，开发者需要使用一些特殊的技巧来确保网页在各种浏览器中都能正常显示。

一、CSS Hack 的原理及常见形式

1、选择器 Hack：利用不同浏览器对 CSS 选择器的解析差异来实现针对特定浏览器的样式调整，IE6 能识别*html .class{}，IE7 能识别*+html .class{} 或者*:first-child+html .class{}。

2、属性 Hack：通过添加特定前缀或后缀来实现针对性的样式设置，IE6 能识别下划线 “_” 和星号 “*”，IE7 能识别星号 “*”，但不能识别下划线 “_”，而 firefox 两个都不能认识。

3、条件注释 Hack：这是微软从 IE5 开始提供的一种非标准逻辑语句，只在 IE 浏览器下执行。<!--[if IE]><!–您的代码–><![endif]–> 可以针对所有 IE 浏览器，<!--[if lt IE 7]><!–您的代码–><![endif]–> 则针对 IE6 及以下版本。

4、媒体查询 Hack：利用不同浏览器对媒体查询的支持差异来实现针对性的样式设置。@media screen and (-webkit-min-device-pixel-ratio:0) { /* 仅 Chrome 和 Safari */ .example { color: red; } }。

二、常用 CSS Hack 示例

1、CSS 属性级 Hack：

color:red; /* 所有浏览器可识别*/

_color:red; /* 仅 IE6 识别 */

*color:red; /* IE6、IE7 识别 */

+color:red; /* IE6、IE7 识别 */

*+color:red; /* IE6、IE7 识别 */

[color:red; /* IE6、IE7 识别 */

color:red9; /* IE6、IE7、IE8、IE9 识别 */

color:red; /* IE8、IE9 识别*/

color:red9; /* 仅 IE9 识别 */

color:red ; /* 仅 IE9 识别 */

color:red!important; /* IE6 不识别 !important*/

2、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:red9; } : /* 仅 IE9 识别 */

3、IE 条件注释 Hack：

<!--[if IE]>此处内容只有 IE 可见<![endif]-->

<!--[if IE 6]>此处内容只有 IE6.0 可见<![endif]-->

<!--[if IE 7]>此处内容只有 IE7.0 可见<![endif]-->

<!--[if !IE 7]>此处内容只有 IE7 不能识别，其他版本都能识别，当然要在 IE5 以上。<![endif]-->

<!--[if gt IE 6]>IE6 以上版本可识别,IE6 无法识别 <![endif]-->

<!--[if gte IE 7]>IE7 以及 IE7 以上版本可识别 <![endif]-->

<!--[if lt IE 7]>低于 IE7 的版本才能识别，IE7 无法识别。 <![endif]-->

<!--[if lte IE 7]>IE7 以及 IE7 以下版本可识别<![endif]-->

<!--[if !IE]>此处内容只有非 IE 可见<![endif]-->

三、IE6 对 !important 的支持

!important 用来做区分 IE6 和 Firefox 等浏览器的基本 Hack 手法，因为 IE6 不支持 !important，而 Firefox 能读懂 !important，其改变了样式的优先级，但实际上，在某些情况下，IE6 也能认识 !important。

<style type="text/css">
.demo{
color:red !important;
color:green;
}
</style>
<div class="demo">www.jb51.net</div>

在上述代码中，在 Firefox 下字体为红色，而在 IE6 下字体为绿色，说明 IE6 忽视 !important 的存在，如果代码改为：

<style type="text/css">
.demo{ color:red !important; }
.demo { color:green; }
</style>
<div class="demo">www.jb51.net</div>

IE6 会将 .demo 的内容显示为红色，说明 IE6 是认得 !important 的，两种情况的区别就在于：当在一个选择器中，利用 !important 改变样式优先级的时候，IE6 下是无效的，后面的样式覆盖了前面的，!important 被彻底无视了。

四、IE6 下的多选择符问题

在 IE6 中，多类选择符的写法可能会导致一些问题。

#my.c1.c2 { color:red;}
.c1.c2 { color:red;}

上述写法在 IE7+/FF/Opera/Safari 等浏览器都支持，但在 IE6 中，后一个类名会覆盖前一个类名，即会被 IE6 理解为：

#my.c2 { color:red;}
.c2 { color:red;}

同理：

#my.c1.c2.c3 { color:red;}

IE6 会将其理解为#my.c3 {color:red;}，在开发中用多类来组合实现 CSS 效果时，需要注意 IE6 的这个问题，最好的方法就是不要用类组合的形式。

五、相关问答FAQs

1、什么是 CSS Hack？

CSS Hack 是指在网页开发中，针对不同浏览器或浏览器版本的兼容性问题，使用特定的 CSS 技巧和方法来解决的技术，由于不同浏览器对 CSS 的解析和渲染存在差异，CSS Hack 就是利用这些差异来实现页面在各种浏览器中的一致显示，常见的 CSS Hack 包括选择器 Hack、属性 Hack、条件注释 Hack、媒体查询 Hack 等。

2、为什么需要使用 CSS Hack？

因为不同的浏览器对 CSS 的解释和实现有所不同，这可能导致页面在不同浏览器中的显示效果不一致，为了确保页面在各种浏览器中都能正常显示，达到预期的布局和样式效果，就需要使用 CSS Hack 来弥补这些差异，虽然 CSS Hack 可以解决兼容性问题，但过度使用会使代码变得复杂难以维护，因此应谨慎使用，并尽量采用标准的 CSS 技术和渐进增强/优雅降级策略。