用!important解决IE和Mozilla的布局差别

在设计《网页设计师》页面的时候，有一个问题一直困扰着我，主菜单在IE和其他(Mozilla、Opera等)浏览器里显示的效果偏差2px。截图如下：

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布局的利器，请记住和掌握它吧:)

赞 (0)

相关推荐

  • 用!important解决IE和Mozilla的布局差别

    用!important解决IE和Mozilla的布局差别

    在设计<网页设计师>页面的时候,有一个问题一直困扰着我,主菜单在IE和其他(Mozilla.Opera等)浏览器里显示的效果偏差2px.截图如下: IE中的效果 Mozilla Firefox中的效果 这是因为IE对盒之间距离的解释的bug造成的(参考onestab的" 浮动模型的问题 ").我一直没有解决这个问题,直到我翻译 " 表格对决CSS--一场生死之战 "时,作者的一个技巧提示帮我找到了解决的方法:用!important. !important

  • 当ie7不认!important之后 [布局的解决办法]

    在IE7之前,我们在布局时常用!important来解决IE和FF之间的差别; 但是在IE7出来之后,!important对IE7就不起作用了,而有些时候IE7的解释方法又与FF和IE6不同;这时新的问题就出现了;用!important可以解决IE6但是解决不了IE7; 这样在不同的浏览器中看到的同一个网页的效果就不同了; 这是前天作布局时的一个问题;可以先看一下效果;http://www.zishu.cn/blogview.asp?logID=553 或者运行一下下边的代码也可以同样看到效果:

  • 典型的三行二列居中高度自适应布局

    典型的三行二列居中高度自适应布局

    如何使整个页面内容居中,如何使高度适应内容自动伸缩.这是学习CSS布局最常见的问题.下面就给出一个实际的例子,并详细解释.(本文的经验和是蓝色理想论坛xpoint.guoshuang共同讨论得出的.) 首先先按这里看实际运行效果,这个页面在mozilla.opera和IE浏览器中均可以实现居中和高度自适应.我们来分析代码: 完整代码<html><head><style type="text/css">body{background:#999;text

  • element-ui中页面缩放时table表格内容错位的解决

    element-ui中页面缩放时table表格内容错位的解决

    目录 element-ui 页面缩放时table表格内容错位 element-ui表格优化--显示错位问题 element-ui 页面缩放时table表格内容错位 当table内容较多的时候, 横向拉动浏览器界面.最后一列自定义按钮,就会出现上下错误的情况. 解决办法: this.$refs.table.doLayout(); table增加ref属性. mounted() { window.addEventListener('resize', this.handleResize); } met

  • $.browser.msie 为空或不是对象问题的多种解决方法

    '$.browser.msie' 为空或不是对象,这个是jQuery错误 出现这个错误,是因为升级了jQuery版本,从1.9以前升级到1.9以后,因为$.browser.msie在1.9以后的jQuery中不存在了,所以报错. jQuery 1.9 移除了 $.browser 的替代方法 $.browser是通过正则表达式来匹配userAgent来判断浏览器版本和种类的.jquery1.3.2版本的文档中已经声明jquery.browser及jquery.browser.version建议弃用

  • 一个Activity中多个Fragment实现沉浸式状态栏的解决方法

    项目中遇到一个问题:一个Activity有多个Fragment,每个Fragment的沉浸式状态栏不一样,有的是红色,有的是黑色,有的是一张图片(图片的一部分在状态栏中显示),并且要要兼顾虚拟按键(常说的导航栏)遮盖住布局导致自己布局中的某些按钮功能被虚拟按键拦截的问题.网上没有找到完全符合的解决方案,现在说一下我自己的思路,因为自己知识有限,不知道有没有更好的方法,希望对一些人能有帮助.思路如下: 要解决某些型号的手机导航栏遮盖布局的问题,一般是在xml的根布局上加上属性: <span sty

  • Android实现QQ登录界面遇到问题及解决方法

    Android实现QQ登录界面遇到问题及解决方法

    先给大家炫下效果图: 首先过程中碰到的几个问题: 1.对 EditText 进行自定义背景 2.运行时自动 EditText 自动获得焦点 3.在获得焦点时即清空 hint ,而不是输入后清空 4.清空按钮的出现时机(在得到焦点并且有输入内容时) ......... --- 这些问题都有一一解决 --- 以下是代码: 布局 fragment_main(问题2) <!-- android:focusable="true" android:focusableInTouchMode=&

  • RecyclerView通过GridLayoutManager实现多样式布局的示例

    RecyclerView通过GridLayoutManager实现多样式布局的示例

    一.开篇 距离上次写文章已经有段时间了,说实话真不知道最近在忙些什么,现在沉下心来把最近项目中遇到的问题记录下来便于以后遇到中使用吧! 废话不多说,先看一下效果图 二.需求解析 1.先说下项目需求,不管是好评还是差评下边的Tag标签有不同的展示类型,有的字数多的会单独占一行处理(这边其实也可以扩充,比如说两三个字的可以一行显示三个Tag标签),第一眼看到这个需求准备使用网上的开源库TagLayout去实现,但是尝试了一下后发现其实他们实现的效果同项目要的效果还是有蛮大差距的,可以看到效果图里边是

  • Apache Hudi数据布局黑科技降低一半查询时间

    Apache Hudi数据布局黑科技降低一半查询时间

    目录 1. 背景 2. Clustering架构 2.1 调度Clustering 2.2 运行Clustering 2.3 Clustering配置 3. 表查询性能 3.1 进行Clustering之前 3.2 进行Clustering之后 4. 总结 1. 背景 Apache Hudi将流处理带到大数据,相比传统批处理效率高一个数量级,提供了更新鲜的数据.在数据湖/仓库中,需要在摄取速度和查询性能之间进行权衡,数据摄取通常更喜欢小文件以改善并行性并使数据尽快可用于查询,但很多小文件会导致查

  • firefox和IE系列的相关区别整理 以备后用

    firefox和IE系列的相关区别整理 以备后用

    .IE与FireFox的js和css png透明 AlphaImageLoaderfilter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=bEnabled,sizingMethod=sSize,src=sURL) enabled:可选项.布尔值(Boolean).设置或检索滤镜是否激活.true:默认值.滤镜激活.false:滤镜被禁止.sizingMethod:可选项.字符串(String).设置或检索滤镜作用的对象的

随机推荐