CSS兼容性解决方法(盒模型)- !important的IE7,Firefox问题
2008-07-14 11:33
615 查看
前面的很多内容属于引言部分,如果您对这些内容比较了解,可以直接跳到下面的“盒模型问题的解决”,查看主要的内容。
首先谈谈!important问题的引起(盒模型问题):
在CSS标准中,一个盒模型包括4个区,分别是:内容、内边距(padding)、边框(border) 和外边距(margin)。而Width宽度的计算,CSS有它的标准。但是实际上,不同的浏览器的表现却不同。比如,
Firefox(FF)是准确按照CSS标准:width为内容的宽度,也就是说:
层的宽度 = "width" + "padding(left and right)" + "border-width";
而IE则把width作为整个层的宽度:
内容的宽度 = "width" - "padding" - "border-width";
![](http://www.kael.com.cn/images/quote.gif)
引用内容
2007.10.03 update:IE7在一次更新中修正了盒模型的BUG,与Firefox的解析一致。2007.10.03验证。
IE的这种解析,被认为是一个BUG。但事实上,这种解释也不无道理,人们在设计页面的时候关注得更多的是盒子的大小,而不是内容的大小。正是因为浏览器的不同解析,给CSS的设计带来一些困难。
针对这个问题,我们经常使用!important来区分Firefox和IE6.0:
![](http://www.kael.com.cn/images/code.gif)
程序代码
#content
{
width: 414px !important;
width: 400px;
padding: 5px; /*只给出一个值,表示上右下左的边距都为5px*/
border-width: 2px;
}
Firefox识别!important,而IE6不识别,且!important的width优先级高,因此FF理解为width: 400px,IE6.0理解为width: 414px,从而显示就相同了。
但是问题出在IE7,IE7.0对!important有了识别能力,但是对盒模型的解析却和IE6.0等一样,从而造成很大的麻烦。也就是说,!important的方法在IE7.0下变得不适用了。
而一般的情况下,border的使用相对较少的,并且border-width一般较小,因此最主要的问题就出在padding上了。网上很多人总结的经验是:padding要尽量少用,能用margin的,就别用padding。这种说法是消极的,问题的解决不应该总是回避。
盒模型问题的解决:
仔细想想,其实问题就出在“width与padding/border-width的同时定义”上,这个问题在CSS代码中一定要注意。而明白了这一点,解决的方法就不难想到了——
当子元素的宽度固定时,padding在其父元素中指定
只要添加一个无width定义的wrapper层,把原来的一个content层拆分成2个层,分别地,在wrapper中定义padding和border-width,然后在content中定义width:
![](http://www.kael.com.cn/images/code.gif)
程序代码
#wrapper { padding: 5px; border-width: 2px; }
#content { margin: 0px; width: 400px; }
![](http://www.kael.com.cn/images/code.gif)
程序代码
<div id="wrapper">
<div id="content">
...
</div>
</div>
这样问题就可以得到解决,FF,IE6.0以及IE7.0都会获得相同的显示效果。更重要的是,没有使用任何CSS hack。
这种解决方法可以说是最终的方案,使用CSS hack的方法只是目前过渡阶段的临时方法。
对于网站构造,特别是对于样式比较复杂的网站,个人建议在重要的层快外加上wrapper层。
但是对于目前现成的模板,可以有选择修改部分样式,分别定义 "width" 与 "padding或者border-width" ,或者使用其他方法。
是否适合所有的浏览器?
理论上,这种方法应该适用于各种浏览器。
但是本人认为除非大型网站,兼容FF,IE6.0,IE7.0已经足够,这里也是主要针对这三个最主流的浏览器,IE更低版本,以及其他浏览器上的可行性有待验证。
PS:小站上面的很多地方使用了wrapper层,从而CSS样式表中没有使用一个!important。
本文属于个人见解,欢迎大家指正和补充~
首先谈谈!important问题的引起(盒模型问题):
在CSS标准中,一个盒模型包括4个区,分别是:内容、内边距(padding)、边框(border) 和外边距(margin)。而Width宽度的计算,CSS有它的标准。但是实际上,不同的浏览器的表现却不同。比如,
Firefox(FF)是准确按照CSS标准:width为内容的宽度,也就是说:
层的宽度 = "width" + "padding(left and right)" + "border-width";
而IE则把width作为整个层的宽度:
内容的宽度 = "width" - "padding" - "border-width";
![](http://www.kael.com.cn/images/quote.gif)
引用内容
2007.10.03 update:IE7在一次更新中修正了盒模型的BUG,与Firefox的解析一致。2007.10.03验证。
IE的这种解析,被认为是一个BUG。但事实上,这种解释也不无道理,人们在设计页面的时候关注得更多的是盒子的大小,而不是内容的大小。正是因为浏览器的不同解析,给CSS的设计带来一些困难。
针对这个问题,我们经常使用!important来区分Firefox和IE6.0:
![](http://www.kael.com.cn/images/code.gif)
程序代码
#content
{
width: 414px !important;
width: 400px;
padding: 5px; /*只给出一个值,表示上右下左的边距都为5px*/
border-width: 2px;
}
Firefox识别!important,而IE6不识别,且!important的width优先级高,因此FF理解为width: 400px,IE6.0理解为width: 414px,从而显示就相同了。
但是问题出在IE7,IE7.0对!important有了识别能力,但是对盒模型的解析却和IE6.0等一样,从而造成很大的麻烦。也就是说,!important的方法在IE7.0下变得不适用了。
而一般的情况下,border的使用相对较少的,并且border-width一般较小,因此最主要的问题就出在padding上了。网上很多人总结的经验是:padding要尽量少用,能用margin的,就别用padding。这种说法是消极的,问题的解决不应该总是回避。
盒模型问题的解决:
仔细想想,其实问题就出在“width与padding/border-width的同时定义”上,这个问题在CSS代码中一定要注意。而明白了这一点,解决的方法就不难想到了——
当子元素的宽度固定时,padding在其父元素中指定
只要添加一个无width定义的wrapper层,把原来的一个content层拆分成2个层,分别地,在wrapper中定义padding和border-width,然后在content中定义width:
![](http://www.kael.com.cn/images/code.gif)
程序代码
#wrapper { padding: 5px; border-width: 2px; }
#content { margin: 0px; width: 400px; }
![](http://www.kael.com.cn/images/code.gif)
程序代码
<div id="wrapper">
<div id="content">
...
</div>
</div>
这样问题就可以得到解决,FF,IE6.0以及IE7.0都会获得相同的显示效果。更重要的是,没有使用任何CSS hack。
这种解决方法可以说是最终的方案,使用CSS hack的方法只是目前过渡阶段的临时方法。
对于网站构造,特别是对于样式比较复杂的网站,个人建议在重要的层快外加上wrapper层。
但是对于目前现成的模板,可以有选择修改部分样式,分别定义 "width" 与 "padding或者border-width" ,或者使用其他方法。
是否适合所有的浏览器?
理论上,这种方法应该适用于各种浏览器。
但是本人认为除非大型网站,兼容FF,IE6.0,IE7.0已经足够,这里也是主要针对这三个最主流的浏览器,IE更低版本,以及其他浏览器上的可行性有待验证。
PS:小站上面的很多地方使用了wrapper层,从而CSS样式表中没有使用一个!important。
本文属于个人见解,欢迎大家指正和补充~
相关文章推荐
- CSS兼容性解决方法(盒模型)- !important的IE7,Firefox问题
- CSS兼容性解决方法(盒模型)- !important的IE7,Firefox问题 最终解决方法
- CSS兼容性解决方法!important的IE7,Firefox问题
- CSS中使用!important解决IE6 IE7 Firefox兼容性问题
- css解决IE6,IE7,firefox兼容性问题
- css解决IE6,IE7,firefox兼容性问题
- 解决IE6、IE7、IE8、Firefox的CSS兼容性问题
- css解决IE6,IE7,firefox兼容性问题[2]
- css解决IE6,IE7,firefox兼容性问题
- IE6/IE7/Firefox兼容性的CSS解决方法
- css解决IE6,IE7,firefox兼容性问题
- css解决IE6,IE7,firefox兼容性问…
- IE6 IE7 IE8 css bug兼容性解决方法总结归纳
- IE6 IE7 IE8 css bug兼容性解决方法总结归纳
- IE6 IE7 IE8 css bug兼容性解决方法总结归纳
- important的妙用解决firefox和ie的css兼容问题
- Firefox和IE兼容性问题及解决方法总结
- 解决IE6、IE7、IE8、Firefox CSS兼容性的 Hack 写法【记录下来,以后可以使用】
- 关于CSS+DIV 开发 与各浏览器的兼容性问题..解决方法.
- CSS 样式important和*和_:兼容IE、Firefox、Opera和Safari CSS的解决方法及CSS差别