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

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值