IE每个新版本的推出,就不可避免地在IE的各个主要版本之间产生兼容问题,尽管IE8推出已有时日,使用IE6的用户仍然相当可观。本文以速查手册的形式介绍CSS(2.1和3)在IE6,IE7,IE8三个版本之间的兼容情况。
IE6,IE7,IE8 CSS兼容速查表
现代Web设计与开发越来越看重浏览器兼容问题,IE每个新版本的推出,都在CSS的标准化方面前进一大步,同时,也就不可避免地在IE的各个主要版本之间产生兼容问题,尽管IE8推出已有时日,使用IE6的用户仍然相当可观。本文以速查手册的形式介绍CSS(2.1和3)在IE6,IE7,IE8三个版本之间的兼容情况。
广州网站建设,网站建设,广州网页设计,广州网站设计
1.居中问题
div里的内容,IE默认为居中,而Firefox默认为左对齐
可以尝试增加代码margin:auto
2.高度问题
两上下排列或嵌套的div,上面的div设置高度(height),如果div里的实际内容大于所设高度,在Firefox中会出现两个div重叠的现象;但在IE中,下面的div会自动给上面的div让出空间
所以为避免出现层的重叠,高度一定要控制恰当,或者干脆不写高度,让他自动调节,比较好的方法是height:100%;
但当这个div里面一级的元素都float了的时候,则需要在div块的最后,闭和前加一个沉底的空div,对应CSS是:
.float_bottom{clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;}
3.clear:both
不想受到float浮动的,就在div中写入clear:both;
4.IE浮动margin产生的双倍距离
- #box{
- float:left;
- width:100px;
- margin:000100px;//这种情况之下IE会产生200px的距离
- display:inline;//使浮动忽略
- }
5.padding问题
Firefox设置padding后,div会增加height和width,但IE不会(*标准的XHTML1.0定义dtd好像一致了) 高度控制恰当,或尝试使用height:100%; 宽度减少使用padding 但根据实际经验,一般Firefox和IE的padding不会有太大区别,div的实际宽=width+padding,所以div写全width和padding,width用实际想要的宽减去padding定义
6.div嵌套时y轴上padding和marign的问题
Firefox里y轴上子div到父div的距离为父padding+子marign IE里y轴上子div到父div的距离为父padding和子marign里大的一个 Firefox里y轴上父padding=0且border=0时,子div到父div的距离为0,子marign作用到父div外面
广州网站建设,网站建设,广州网页设计,广州网站设计
7.padding,marign,height,width的傻瓜式解决技巧
注意是技巧,不是方法: 写好标准头
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml">
高尽量用padding,慎用margin,height尽量补上100%,父级height有定值子级height不用100%,子级全为浮动时底部补个空clear:both的div 宽尽量用margin,慎用padding,width算准实际要的减去padding。



