itRef.cn技术参考网站

当前位置: 主页 > CSS >

IE6、IE7父容器padding-top问题

时间:2010-06-10 15:37来源:未知 作者:adm_ref 点击:
今天碰到一个奇怪的CSS布局兼容性问题,给浮动父容器设置padding-top时,在IE8和FF都显示正常,但在IE6、IE7时,父容器的padding-top却被浮动的元素所继承,导致布局错误。具体区别如下图: IE8、FF显示: IE6、IE7显示: 出现问题代码: !DOCTYPE html PUBL

今天碰到一个奇怪的CSS布局兼容性问题,给浮动父容器设置padding-top时,在IE8和FF都显示正常,但在IE6、IE7时,父容器的padding-top却被浮动的元素所继承,导致布局错误。具体区别如下图:

IE8、FF显示:

IE6、IE7显示:


 

出现问题代码:


 提示:您可以先修改部分代码再运行

若只要求布局兼容各浏览器(即不要求父容器的高度自适应),解决的方法:

1. 除了设置父容器的padding-top, 还设置父容器width样式
2. 把设置父容器的padding-top, 换成margin-top

若要求布局和父容器的高度都兼容各浏览器,解决的方法:

1. 设置父容器width、margin-top、overflow:hidden样式
 其中设置width是为了兼容IE6,overflow:hidden为了兼容IE8、FF,设置width和overflow:hidden之一IE7即可兼容

2. 设置父容器width、padding-top、overflow:hidden样式
 其中设置width是为了兼容IE6,overflow:hidden为了兼容IE8、FF,设置width和overflow:hidden之一IE7即可兼容

兼容的实例:


 提示:您可以先修改部分代码再运行

 

(责任编辑:wiwi) 转载请注明 来源于itRef.cn技术参考网站:
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
栏目列表
推荐内容