为不同浏览器Firefox、IE6、IE7、IE8、IE9定义不同CSS样式(CSS hack)

分类:Web之旅　|　发布者:Tim　|　发布日期: 2007-12-29　|　天气:

大 | 中 | 小

有时候我们在制作网页的时候，会遇到不同浏览器，对填充和边距显示的不同效果。导致心情纳闷
现在提供解决这个困扰的方法！

对FF、Opear等支持Web标准的浏览器与比较顽固的IE浏览器进行针对性的CSS hack

/*FF、Opear等支持Web标准的浏览器*/
#header {
        margin-top: 23px;
        margin-bottom: 23px;
}
/*IE6浏览器*/
*html #header {
        margin-top: 13px;
        margin-bottom: 13px;
}
/*IE7浏览器*/
*+html #header {
        margin-top: 18px;
        margin-bottom: 18px;
}

因此，当你在遇到这种情况的时候可以用
* html 来定义IE6
*+html 来定义IE7

更新:
还有一种css hack直接与其他浏览器一起写在一条css表达式中

#header{
margin-top: 13px;     /* 所有浏览器都支持 */
margin-top: 13px !important;     /* Firefox、IE7支持 */
_margin-top: 13px;     /* IE6支持 */
*margin-top: 13px;     /* IE6、IE7支持 */
+margin-top: 13px;     /* IE7支持 */
margin-top: 13px\9;     /* IE6、IE7、IE8、IE9支持 */
margin-top: 13px\0;     /* IE8、IE9支持 */
}

需要注意书写顺序：所有浏览器、Firefox、IE8、IE7、IE6依次排列。

文章出处:　　本文为Azuresky Blog原创,转载请注明"作者"和"出处"及本声明！

阅读(6422)

引用(0)