钱本草

IE/Firefox CSS兼容问题

       经过一天的学习+一天的修改，钱本草博客新加的菜单和横幅终于兼容了IE6/IE7/Firefox，效果上基本一致了，今天晚上有时间加到上面去，以免太多人用forefix看见奇丑无比的页面，其实这区别也不是很大，只是在处理上多加一点小技巧而已，下面我向大家介绍一下遇见这样的问题应该怎么处理。

     首先你要明白IE/Firefox的根本区别就是BOX模型不一致所导致的，其实CSS ’width’ 指的是标准CSS中所指的width的宽度，在firefox中的宽度就是这个宽度。firefox还是比较遵循W3C标准的，它只包含容器中内容的宽度。而Internet Explorer ’width’则是指整个容器的宽度，包括内容，padding ，border。
Firefox中：容器占的宽度=内容宽度+padding宽度+border宽度
IE中：内容宽度=您定义的容器宽度(Internet Explorer ’width’)-padding宽度-border宽度
所以，如果IE中定义 width:120px;padding:5px 的话，所显示的宽度就是120px. 即padding:5px是在width里面。 而Firefox中，上面这个定义，显示宽度就是 125 px; 所以，我们就必须这样定义：

width:115px !important;width:120px;padding:5px; !important; 一定要在前面 而且还要有个空格

除了!important外还有两种方法 2：大于号“>” 3：还有这种注释/**/ 下面分别说一下：

     方法1. !important  一定记得一个属性的后面打一个‘空格’然后紧跟!important  这样写之后 IE 和 Firefox就分道扬镳了。

#head {width: 100px !important; width: 70px;}  IE 说 它是70px 因为IE 不认识‘!important（提升优先权）’发现了重复定义width时候就按最后一个来显示Firefox说 它是100px 因为Firefox认识‘!important’根本不甩后边那句。
   方法2是这么写的

#head {

width: 100px;

width /**/: 70px;

}IE 认为它宽100px 因为它会把有/**/的那一行属性定义给注释掉。而Firefox 则认为它宽70px 因Firefox只注释/**/之间的东西而不是整行属性都作废都注释掉注意它们之前必须的哪个空格。
    方法3就 比较容易理解和使用了。这个大于号 只有IE 大爷才能认识 真是佩服IE的强悍 连大于小于号都能解析。其他浏览器就没这么牛了。#head {   width: 100px;  >width: 70px;}

欢迎光临本站!请 订阅本站Feed 获得最新信息
转载请注明文章转载自：钱本草 [http://www.qbencao.com]
本文链接地址：IE/Firefox CSS兼容问题