IE5 IE6~IE9 FF 之间盒子宽度兼容性写法
2010-11-22 21:14
267 查看
用css写网页,遇到到最常见的问题是IE5
与IE之后的盒子实际宽度不一致,以及FIreFox也是一样,同样的代码在IE6~IE9及FireFox下表现一致,看似没有问题,但到IE5下,面
目全非,令网页设计者非常头疼,我也是一样,在刚开始用Css写出网页的时候,没发现这个问题,这几天在做林州国富科技
这个网站的时候,突然间用IETester测试,发现了这个问题,经过几天的研究,发现兼容性比较强的代码,下面来说一下:
首先把最常用的网页框写出来,这样便于说明
<style>
.wrap{ //为整个网页的最外层标签
width:960px;
}
.header{ //wrap下第一层
height:200px;
}
.content{ //wrap第一层
}
.left{ //content第一层
width:610px;
}
.right{ //content第一层
width:240px;
}
.footer{ //wrap第一层
test-align:center;
}
</style>
IE5盒子实际宽度=width-padding-border+margin
IE6盒子实际宽度=width+padding+border+margin
从这两个工式,可以判断,header如果加padding-top,padding-bottom会在IE5,IE6下的宽度显示不一致,如果padding是必须加的话,那么可以把height去掉,显示效果就一样了。
这样就样就总结出果,如果要显示效果一样,就尽量不要给出宽度及高度。宽度可由外层的标签限制,内层只需要继承就可以了,高度也可能继承。这样就完美的解决了盒子宽度、高度不一致的问题。
与IE之后的盒子实际宽度不一致,以及FIreFox也是一样,同样的代码在IE6~IE9及FireFox下表现一致,看似没有问题,但到IE5下,面
目全非,令网页设计者非常头疼,我也是一样,在刚开始用Css写出网页的时候,没发现这个问题,这几天在做林州国富科技
这个网站的时候,突然间用IETester测试,发现了这个问题,经过几天的研究,发现兼容性比较强的代码,下面来说一下:
首先把最常用的网页框写出来,这样便于说明
<style>
.wrap{ //为整个网页的最外层标签
width:960px;
}
.header{ //wrap下第一层
height:200px;
}
.content{ //wrap第一层
}
.left{ //content第一层
width:610px;
}
.right{ //content第一层
width:240px;
}
.footer{ //wrap第一层
test-align:center;
}
</style>
IE5盒子实际宽度=width-padding-border+margin
IE6盒子实际宽度=width+padding+border+margin
从这两个工式,可以判断,header如果加padding-top,padding-bottom会在IE5,IE6下的宽度显示不一致,如果padding是必须加的话,那么可以把height去掉,显示效果就一样了。
这样就样就总结出果,如果要显示效果一样,就尽量不要给出宽度及高度。宽度可由外层的标签限制,内层只需要继承就可以了,高度也可能继承。这样就完美的解决了盒子宽度、高度不一致的问题。
相关文章推荐
- DIV+CSS布局中IE与FF浏览器之间重要的兼容性差异
- 最新区分兼容IE6/IE7/IE8/IE9/FF的CSS HACK写法
- IE5,IE5.5,IE6,IE7,IE8,IE9的css兼容性列表
- 【转】 解决IE5/IE5.5/IE6/FF的兼容性问题
- [css]IE5/IE5.5/IE6/FF兼容性
- IE6 IE7 IE8 FF 兼容性的写法
- css兼容性小结(1) FF IE6 IE7 IE8
- IE FF 支持li:hover,但是ie6不支持,a:hover ul 这种写法是要搭配顶部针对IE6声明用的
- CSS的IE6、IE7、FF兼容性写法
- CSS的解决IE5/IE5.5/IE6/FF的兼容性问题
- CSS的IE6、IE7、FF兼容性写法
- 针对IE6,IE7,IE8,IE9,FF等不同浏览器的CSS写法
- 最新区分兼容IE6/IE7/IE8/IE9/FF的CSS HACK写法和Css if hack条件语
- 最新区分兼容IE6/IE7/IE8/IE9/FF的CSS HACK写法和Css if hack条件语法操作说明
- IE6+IE7+IE8+IE9+FF兼容性调试
- 最新区分兼容IE6/IE7/IE8/IE9/FF的CSS HACK写法
- HTML兼容性 不声明doctype,IE9标准模式下position:fixed定位失败,导致遮罩层(Mask Layer)显示在页面最下方,FF和Chrome正常
- 一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10
- 通过CSS Hack 区分 FF/IE7/IE6/IE5.5/IE5 代码推荐