页面元素的背景及boder被裁掉 -- CSS/HTML -- IT技术博客大学习 -- 共学习共进步！

您现在的位置：首页 --> CSS/HTML --> 页面元素的背景及boder被裁掉

页面元素的背景及boder被裁掉

浏览:1837次出处信息

在IE5~IE8、FF、Opera、Chrome、Safari中当浏览器窗口少于内容宽度,拖动横向滚动条会发现页面元素的背景及boder被裁掉，主要原因是body子级元素定义了100%宽度或是承继父及的100%宽度（即没有定义宽度）。C1_Demo

为定义display:table;及width:100%;属性值。C2_Demo为定义display:inline-table;及width:100%;属性值。C3_Demo此方案针对IE6,建议在被应用或承继100%宽度的元素内,定义一个固定宽度的元素。C4_Demo

在IE5~IE7中此问题暂时无法解决，因为IE5~IE7不支持display:table;属性值body根据页面内容高度而撑高，当内容不足一屏幕高度时，body将来不显示余下高度的背景。A4_Demo

为此需要给及定义height:100%;属性值。A5_Demo

第3种方案只针对IE6,其它浏览器或版本不生效,所以要结合第1或第2种方案来解决兼容性问题。C5_Demo而在IE7中暂时无法解决。

QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习

建议继续学习

近3天十大热文