CSS hack技术

Posted 2020-07-02 God is Love

首先我们要了解一个概念CSS hack

不同浏览器，比如IE6、IE7、IE8,Mozilla Firefox等，对CSS的支持及解析结果不同，因此会导致相同的网页生成的页面效果不一样。

这个时候我们就需要针对不同的浏览器去定义不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。

这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack,也叫写CSS hack。

CSS Hack的原理：由于不同的浏览器对CSS的支持及解析结果不同以及CSS中的优先级的关系，我们就可以根据这个来针对不同的浏览器来写不同的CSS。

比如：

IE6能识别下划线"_"和星号" * "，

IE7能识别星号" * "，但不能识别下划线"_"，

而firefox两个都不能认识。

例如：比如，通常我们会遇到如下的写法：

.side_col { float:left; display: inline; margin-left: 20px; }

而为了适应IE6是：

.side_col { float: left; margin-left: 20px; }

* .side_col { _display:inline; /*hacked for IE 6*/ }

再比如：

id="bgcolor" 的控件要在 IE6 中显示蓝色, IE7 中显示绿色, Firefox 等其他浏览器中显示红色

. #bgcolor { background:red !important; /* Firefox 等其他浏览器 */ background:blue; /* IE6 */}*+html #bgcolor { background:green !important; /* IE7 */}IE6 不认 !important, 也不认 *+html. 所以 IE6 只能是 blue. IE7 认 !important, 也认 *+html, 优先度: (*+html + !important) > !important > +html. IE7 可以是 red, blue 和 green, 但 green 的优先度最高. Firefox 和其他浏览器都认 !important. !important 优先, Firefox 可以是 red 和 blue, 但 red 优先度高.