CSS hack技术

时间:2023-02-15 17:13:39

首先我们要了解一个概念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 优先度高.