浏览器不兼容解决

《浏览器不兼容解决》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

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

2、portant是CSS1就定义的语法，作用是提高指定样式规则的应用优先权(参见：W3.org的解释)。语法格式{sRule!important}，即写在定义的最后面，例如：box{color:red!important;}最重要的一点是：IE一直都不支持这个语法，而其他的浏览器都支持。因此我们就可以利用这一点来分别给IE和其他浏览器不同的样式定义，例如，我们定义这样一个样式：.colortest{border:20pxsolid#60A179!important;border:20pxsolid#00F;padding:30p

3、x;width:300px;}在Mozilla中浏览时候，能够理解!important的优先级，因此显示#60A179的颜色：在IE中浏览时候，不能够理解!important的优先级，因此显示#00F的颜色：可以看到，利用!important，我们可以针对IE和非IE浏览器设置不同的样式，只要在非IE浏览器样式的后面加上!important。因此，上面提到的我的主页2px的显示差别也轻松解决：PADDING-TOP:11px!important; PADDING-TOP:9px;!important必定成为CSS布局的利器，请

4、记住和掌握它吧:)　　原来css在同一个大括号内是让firefox优先认领，也就是说只有在同一括号内定下两个样式的时候ie不得不忽略掉它，而不是像网上大多介绍的那样直接忽略。其实!important还有保护的作用，在任何需要保护的属性后面插入它可以避免被基于特性的属性覆盖。看了群博客上balibell说的“‘!important’在同一条样式定义中即大括号{}中，firefox、opera优先认领，ie不认得即忽略’!important’字符串。在非同一条样式中即不同的大括号中{}标有‘!important’的样式对所有浏览器

5、均属优先认领。网上有说ie不认‘!important’的，大错特错了。”看来自己也是这么错误地过来了。难怪今天改css的时候，我只想针对firefox来做一个padding-bottom，就写了个.class{padding-bottom:6px!important;}可是却没有效果呢。看来网上也不能全信啊。原来css在同一个大括号内是让firefox优先认领，也就是说只有在同一括号内定下两个样式的时候ie不得不忽略掉它，而不是像网上大多介绍的那样直接忽略。其实!important还有保护的作用，在任何需要保护的属性后面插入它

6、可以避免被基于特性的属性覆盖。例如：#nava{color:red;}a{color:teal!important},通常，一个带有id名#nav的元素里的一个链接会变设设位红色，因为这个#nava比标签样式具体的多，但因为包含了！important，以为则会这个属性永远胜出。这样，对!important的理解也就更深入了。哦，这样叫!important才对么。另再补充下css的优先级，一个标签选择器1分，一个类选择器10分，一个id选择器100，一个行内样式1000，！important就当无限分吧，呵呵。分值相同时按后出现

7、优先的原则算，ok.!important在ie7.0的hack方法作者：x2hu　时间：2006-06-18　文档类型：翻译　来自：蓝色理想 英文原文地址: http://www.ibloomstudios.com/article7/由于ie对!important识别存在bug,而现在大部分网页标准设计师又通过这个bug来兼容ie和ff,但是ie7.0把这个bug给修复了,所以问题又出现了,怎么兼容ie.7.0的同时又能兼容ie6.0和ff?正所谓"上有政策,下有对策",国外的网页标准设计师通过使用cssfilter的办法(并

8、不是csshack)来兼容ie7.0,ie6.0和ff,以下为我从国外网站的翻译.新建一个css样式如下：#item{   width:200px;   height:200px;   background:red;}新建一个div,并使用前面定义的css的样式：