IE5 IE6~IE9 FF 之间盒子宽度兼容性写法

最新推荐文章于 2023-01-02 21:27:42 发布

jinwei_zhiyuan

最新推荐文章于 2023-01-02 21:27:42 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

文章标签： ie firefox border header css 测试

本文链接：https://blog.youkuaiyun.com/jinwei_zhiyuan/article/details/6028138

本文针对不同版本IE浏览器及Firefox在CSS解析上的差异，提出了一种兼容性较强的代码编写技巧，通过调整布局元素的宽度和高度设置，确保网页在IE5至IE9及Firefox等浏览器下的一致性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用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去掉，显示效果就一样了。
这样就样就总结出果，如果要显示效果一样，就尽量不要给出宽度及高度。宽度可由外层的标签限制，内层只需要继承就可以了，高度也可能继承。这样就完美的解决了盒子宽度、高度不一致的问题。