用!important解决IE和Mozilla的布局差别
解决 布局 IE Mozilla 差别
2023-06-13 09:13:41 时间
在设计《网页设计师》页面的时候，有一个问题一直困扰着我，主菜单在IE和其他(Mozilla、Opera等)浏览器里显示的效果偏差2px。截图如下：
IE中的效果
MozillaFirefox中的效果
这是因为IE对盒之间距离的解释的bug造成的(参考onestab的"浮动模型的问题")。我一直没有解决这个问题，直到我翻译"表格对决CSS--一场生死之战"时，作者的一个技巧提示帮我找到了解决的方法：用!important。
!important是CSS1就定义的语法，作用是提高指定样式规则的应用优先权(参见：W3.org的解释)。语法格式{sRule!important}，即写在定义的最后面，例如：
最重要的一点是：IE一直都不支持这个语法，而其他的浏览器都支持。因此我们就可以利用这一点来分别给IE和其他浏览器不同的样式定义，例如，我们定义这样一个样式：
.colortest{
border:20pxsolid#60A179!important;
border:20pxsolid#00F;
padding:30px;
width:300px;
}
在Mozilla中浏览时候，能够理解!important的优先级，因此显示#60A179的颜色：
在IE中浏览时候，不能够理解!important的优先级，因此显示#00F的颜色：
可以看到，利用!important，我们可以针对IE和非IE浏览器设置不同的样式，只要在非IE浏览器样式的后面加上!important。因此，上面提到的我的主页2px的显示差别也轻松解决：
PADDING-TOP:9px;
!important必定成为CSS布局的利器，请记住和掌握它吧:)
相关文章
- [Git]如何解决Git代码冲突
- Linux系统满了 如何解决？（linux满了怎么办）
- MySQL循环查询：解决复杂问题的便捷解决方案（mysql循环查询）
- 解决MySQL错误编码的有效方法（mysql错误编码）
- 解决虚拟机Linux网络问题（虚拟机linux不能上网）
- 解决Linux机器时间同步困难（linux如何同步时间）
- 解决MySQL日志乱码问题（mysql日志乱码）
- 以CTX技术解决Oracle数据库中的安全性问题（ctx oracle）
- IE无法连接Oracle数据库的解决方法（ie无法跳转oracle）
- 解决Oracle无效对象的正确方法（oracle修复无效对象）
- MySQL换行问题解决方法探讨（mysql不能换行吗）
- Mysql连接问题，解决方法不容错过（mysql不然我连接）
- MySQL数据库无法导出数据，如何解决（mysql 不能导出）
- 解决Oracle数据库不显示列名的问题（oracle不显示列名）