技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> CSS/HTML --> 页面元素的背景及boder被裁掉

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

浏览:1903次  出处信息

    在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

第1第2两种的方案缺点

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

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

总结

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

建议继续学习:

  1. 浏览器对居中的背景图片的兼容性    (阅读:2770)
  2. 一张背景实现自适应九宫格    (阅读:2557)
  3. 缩小窗口<body>背景被裁掉    (阅读:2392)
  4. 两侧背景自动延伸的CSS实现方法    (阅读:2348)
  5. 渐变背景上的内容垂直居中    (阅读:2272)
  6. 一个标签应用三个背景图片    (阅读:2256)
  7. 消失的列表背景    (阅读:2153)
  8. 改善IE6中a与a:hover的背景支持    (阅读:1977)
  9. 无缝背景的推荐    (阅读:1985)
  10. CSS Gradient详解    (阅读:1426)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1