{浏览器兼容}用!important解决IE和Mozilla的布局差别

文章类别：div+css布局 | 发表日期:2008-9-26 12:00:52

　　IE中的效果

 

 

　　Mozilla Firefox中的效果

　　这是因为IE对盒之间距离的解释的bug造成的(参考onestab的" 浮动模型的问题 ")。我一直没有解决这个问题，直到我翻译 " 表格对决CSS--一场生死之战 "时，作者的一个技巧提示帮我找到了解决的方法：用!important。

　　!important是CSS1就定义的语法，作用是提高指定样式规则的应用优先权(参见：W3.org的解释)。语法格式{ sRule!important }，即写在定义的最后面，例如：

　　box{color:red !important;}
　　
　　最重要的一点是：IE一直都不支持这个语法，而其他的浏览器都支持。因此我们就可以利用这一点来分别给IE和其他浏览器不同的样式定义，例如，我们定义这样一个样式：

 

 

　　.colortest {

　　border:20px solid #60A179 !important;

 

 

　　border:20px solid #00F;

 

 

　　padding: 30px;

　　width : 300px;

　　}

　　在Mozilla中浏览时候，能够理解!important的优先级，因此显示#60A179的颜色：

　　在IE中浏览时候，不能够理解!important的优先级，因此显示#00F的颜色：

　　可以看到，利用!important，我们可以针对IE和非IE浏览器设置不同的样式，只要在非IE浏览器样式的后面加上!important。因此，上面提到的我的主页2px的显示差别也轻松解决：

　　PADDING-TOP: 11px !important;

 

 

　　PADDING-TOP: 9px;

　　!important必定成为CSS布局的利器，请记住和把握它吧:）

 

上一篇：{浏览器兼容}IE与FF浏览器CSS兼容技巧 人气:3925
下一篇：{浏览器兼容}CSS hack浏览器兼容一览表 人气:2850

div+css布局视频教程