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

解决

作者:阿捷 2004-7-24 14:56:36
在设计《网页设计师》页面的时候,有一个问题一直困扰着我,主菜单在IE和其他(Mozilla、Opera等)浏览器里显示的效果偏差2px。截图如下:

IE中的效果


Mozilla Firefox中的效果


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

!important是CSS1就定义的语法,作用是提高指定样式规则的应用优先权(参见:CSS2/cascade.html#important-rules">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布局的利器,请记住和掌握它吧:)

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索浏览器
, 样式
, mozilla
, 优先级
, 语法
效果
cad布局很卡怎么解决、c c 解决问题差别、mozilla、mozilla firefox、mozilla thunderbird,以便于您获取更多的相关知识。

时间: 2025-01-26 19:52:28

用!important解决IE和Mozilla的布局差别的相关文章

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

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

解决IE和Mozilla的布局差别的利器:“!important”

初学div+css网页布局的设计者常常会被一个问题困扰着.在IE和其他(Mozilla.Opera等)浏览器里显示的效果常常会偏差2px.这是因为IE对盒之间距离的解释的bug造成的.一个技巧提示帮我们找到了解决的方法:用!important.!important是CSS1就定义的语法,作用是提高指定样式规则的应用优先权.语法格式{ sRule!important },即写在定义的最后面,如: box{color:red !important;} 最重要的一点是:IE一直都不支持这个语法,而其他

如何用!important解决浏览器兼容性问题

"!important"是什么? 第一个,是设置样式的优先级,设了!important的样式的属性优先于id选择器和class选择器.,比如id为"Main"的div在它的Class设背景色为红色,,id选择器下又设了背景色为蓝色,照css的"就近原则",它的背景色应该是红色了,因为id选择器的优先级高于class选择器,但是,一旦class里设了"!important",哈哈,id,一边去吧..我背景颜色要优先显示class

IE与FF不兼容网页布局CSS问题

CSS网页布局中往往会出现很多IE与FF不兼容问题,下面整理了一些常见的可能及其解决的办法! 1.用!important解决IE和Mozilla的布局差别 !important是CSS1就定义的语法,作用是提高指定样式规则的应用优先权,最重要的一点是:IE一直都不支持这个语法,而其他的浏览器都支持.因此我们就可以利用这一点来分别给IE和其他浏览器不同的样式定义,例如,我们定义这样一个样式: .colortest{  border:20pxsolid#60A179!important;  bord

当ie7不认!important之后 [布局的解决办法]_经验交流

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

IE6.7.8.FF兼容的问题的解决之道

作为一个网络架构师,在网站设计的时候,应该注意遇到最常见的问题是css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网站,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所有浏览器 通用 height: 100px;   IE6 专用 _height: 100px; IE6 专用 *height: 100px;   IE7 专用 *+height: 100px; IE7.FF 共用 height: 100px !important;一.C

css兼容调试常见情况及解决方法

css兼容调试常见情况及相应方法,阅读css兼容调试常见情况及相应方法,一.CSS HACK以下两种方法几乎能解决现今所有HACK.1, !important随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.) 一.CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该

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

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

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

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