页面元素的背景及boder被裁掉
浏览:1895次 出处信息
在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中暂时无法解决。
建议继续学习:
- 浏览器对居中的背景图片的兼容性 (阅读:2762)
- 一张背景实现自适应九宫格 (阅读:2548)
- 缩小窗口<body>背景被裁掉 (阅读:2381)
- 两侧背景自动延伸的CSS实现方法 (阅读:2341)
- 渐变背景上的内容垂直居中 (阅读:2264)
- 一个标签应用三个背景图片 (阅读:2247)
- 消失的列表背景 (阅读:2138)
- 改善IE6中a与a:hover的背景支持 (阅读:1972)
- 无缝背景的推荐 (阅读:1966)
- CSS Gradient详解 (阅读:1399)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:缩少窗口<img/>被裁掉
后一篇:缩小窗口<body>背景被裁掉 >>
文章信息
- 作者:Gulu77 来源: Gulu77
- 标签: boder 背景
- 发布时间:2009-11-08 23:07:20
建议继续学习
近3天十大热文
- [67] Go Reflect 性能
- [66] Oracle MTS模式下 进程地址与会话信
- [63] 如何拿下简短的域名
- [61] android 开发入门
- [60] 【社会化设计】自我(self)部分――欢迎区
- [59] IOS安全–浅谈关于IOS加固的几种方法
- [59] 图书馆的世界纪录
- [54] 视觉调整-设计师 vs. 逻辑
- [49] 读书笔记-壹百度:百度十年千倍的29条法则
- [48] 界面设计速成