IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

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

Gulu77 2009-11-08 23:07:20 累计浏览 2,971 次
本机暂存

    在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. translateZ() (2026-06-25 21:18:56)
  2. translateY() (2026-06-25 21:17:56)
  3. translateX() (2026-06-25 21:16:01)

查看更多 前端 文章 →

建议继续学习

  1. 50个活力和动感的网页设计-颜色的灵感 (累计阅读 34,442)
  2. 视觉设计前瞻实用性研究(PNVD) 第二期 (累计阅读 12,977)
  3. 各公司对前端开发的职位描述 (累计阅读 10,405)
  4. iframe大小自适应 (累计阅读 10,057)
  5. 浏览器的渲染原理简介 (累计阅读 8,377)
  6. 解决IE6从Nginx服务器下载图片不Cache的Bug (累计阅读 8,357)
  7. 程序员眼里IE浏览器是什么样的 (累计阅读 8,011)
  8. 2010网页设计趋势 (累计阅读 7,818)
  9. Web前端工程师编程能力飞升之路 (累计阅读 7,691)
  10. 颜色的代码表达式 (累计阅读 7,665)