前端开发必须知道的CSS(1):CSS Hack
在开发中,我们常会遇到某些css在IE中显示正常,但是在Firefox中显示不是我们所希望的,或者在Firefox中正常而在IE中不是我们所要。由于不同浏览器对CSS的支持和解析不一样,或者CSS优先级不一样,所以我们常针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,这就是CSS Hack。也可以说CSS Hack就是那些能区别不同浏览器的字符,如!important, * , _ 等。在看了一些网上的相关知识后和实践后,作下总结。
各浏览器的CSS Hack:
在IE7发布之前,区分IE与FireFox(OP等与FireFox一样),可以靠!important。譬如body{background-color:green !important;background-color:blue;} ,在IE6中打开页面,body的背景色是蓝色,因为IE6不识别!important,而Firefox识别了!important,所以在Firefox中背景色是绿色,含有!important的样式要写在前面,因为如果2个样式都能识别,后面的会覆盖前面的。
而杯具的IE7识别了!important,所以不能仅靠!important来区分Firefox了。
另外,对*号的解释,网上有些是这样说的:*: Html 元素被认为是网页上的第一个元素,即根元素。但是,IE 的所有当前版本有一个匿名的根元素,它包围着Html 元素,即*。
IE6 IE7都能识别*,但FF不能识别。IE6支持下划线,IE7和firefox均不支持下划线。而*+只有IE7才支持。
区别FF与IE6:
background-color:green !important;*background-color:blue;
区别IE7与IE6:
background-color:green !important;background-color:blue;
区别IE7与FF:
background-color:orange; *background-color:blue;
区别FF,IE7,IE6:
background-color:orange;*background-color:green !important;*background-color:blue;
或者background-color:orange;*background-color:green;_background-color:blue;
然后,IE8又出来了,而唯一被IE8识别的是\0。
于是:
.test{
color:#000000; /* FF,OP支持 */
color:#0000FF\0; /* IE8*/
*color:#FFFF00; /* IE7支持 */
_color:#FF0000; /* IE6支持 */
}
书写顺序:
FF-IE8-IE7-IE6
应用:
IE与Firefox等浏览器对容器width的解释不同,在firefox,opera等中的宽度只包含容器中内容的宽度。而Internet Explorer的width则是指整个容器的宽度,包括内容,padding ,border-width。
div.box{
border-width:50px;
padding:50px;
width:200px;
height:200px;
*width:400px; /*加*号被所有IE识别*/
*height:400px;
}
这样就使得在IE和FF中内容的宽度高度都是200px。
针对此列,还有另外种解决办法:
只要在DIV外面再添加一个无width定义的wrapper层,在wrapper中定义padding和border-width,然后在本DIV中定义width
如:
#wrapper { padding: 50px; border-width: 50px; }
#content { margin: 0px; width: 200px; }
<div id="wrapper">
<div id="content">
...
</div>
</div>
这样内容就肯定是200px了,外面的padding和 border-width也正常显示,主要就是将在不同浏览器会影响width的padding和 border-width抽离到内容层外面的层,从而不再影响width。