- 1、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。。
- 2、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
- 4、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
- 5、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们。
- 6、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 7、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
用!important解决IE和Mozilla的布局差别
作者:阿捷 2004-7-24 14:56:36
在设计《网页设计师》页面的时候,有一个问题一直困扰着我,主菜单在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布局的利器,请记住和掌握它吧:)
看了群博客上balibell说的“‘!important’ 在同一条样式定义中即大括号{}中,firefox、opera优先认领,ie不认得即忽略’!important’字符串。在非同一条样式中即不同的大括号中{}标有‘!important’的样式对所有浏览器均属优先认领。网上有说ie不认‘!important’的,大错特错了。”看来自己也是这么错误地过来了。难怪今天改css的时候,我只想针对firefox来做一个padding-bottom,就写了个.class{padding-bottom:6px !important;}可是却没有效果呢。看来网上也不能全信啊。
原来css在同一个大括号内是让firefox优先认领,也就是说只有在同一括号内定下两个样式的时候ie不得不忽略掉它,而不是像网上大多介绍的那样直接忽略。其实!important还有保护的作用,在任何需要保护的属性后面插入它可以避免被基于特性的属性覆盖。例如:#nav a{color:red;} a{color:teal !important},通常,一个带有id名#nav的元素里的一个链接会变设设位红色,因为这个#nav a比标签样式具体的多,但因为包含了!important,以为则会这个属性永远胜出。
这样,对!important的理解也就更深入了。
哦,这样叫!important才对么。
另再补充下css的优先级,一个标签选择器1分,一个类选择器10分,一个id选择器100,一个行内样式1000,!important就当无限分吧,呵呵。分值相同时按后出现优先的原则算,ok.
!important在ie7.0的hack方法
作者:x2hu 时间: 2006-06-18 文档类型:翻译 来自:蓝色理想?
英文原文地址:?/article7/
由于ie对!important识别存在bug,而现在大部分网页标准设计师又通过这个bug来兼容ie和ff,但是ie7.0把这个bug给修复了,所以问题又出现了,怎么兼容ie.7.0的同时又能兼容ie6.0和ff?正所谓上有政策,下有对策,国外的网页标准设计师通过使用css filter的办法(并不是css hack)来兼容ie7.0,ie6.0和ff,以下为我从国外网站的翻译.
新建一个css样式如下:
#item {??? width: 200px;??? height: 200px;??? background: red;}
新建一个div,并使用前面定义的css的样式:
div id=itemsome text here/div
在body表现这里加入lang属性,中文为zh:
body lang=en
现在对div元素再定义一个样式:
*
文档评论(0)