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

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

对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依次排列。

你可能感兴趣的:(firefox)