IT技术博客大学习 共学习 共进步

缩小窗口<body>背景被裁掉

Gulu77 2009-11-08 23:07:38 浏览 3,362 次

    此现状出现在IE7、FF、Opera、Chrome、Safari中,当浏览器窗口少于内容,拖动窗口横向滚动条时能发现定义在的背景会被裁掉,似乎背景只计算了当前窗口的宽度。引起这问题的主要原因是在中定义了背景。在IE6不存在此问题。B1_Demo

解决方案

删除定义的背景(指背景颜色及图片,建议使用)B2_Demo为定义display:table;及width:100%;属性。B3_Demo为定义display:inline-table及width:100%属性。B4_Demo

第2跟第3的方案缺点

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

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

建议继续学习

  1. 浏览器对居中的背景图片的兼容性 (阅读 3,721)
  2. 一张背景实现自适应九宫格 (阅读 3,702)
  3. 渐变背景上的内容垂直居中 (阅读 3,526)
  4. 一个标签应用三个背景图片 (阅读 3,403)
  5. 两侧背景自动延伸的CSS实现方法 (阅读 3,125)
  6. 消失的列表背景 (阅读 3,083)
  7. 无缝背景的推荐 (阅读 3,024)
  8. 页面元素的背景及boder被裁掉 (阅读 2,861)
  9. 改善IE6中a与a:hover的背景支持 (阅读 2,863)
  10. CSS Gradient详解 (阅读 2,680)