DIV CSS用float时引起背景不正常显示的解决办法
来源:互联网 发布:单身狗的心酸知乎 编辑:程序博客网 时间:2024/05/20 13:37
当div里面套嵌多个用float定义的层是,背景图没有办法在firefox里面显示。
上网搜了一下才找到解决的方法。
div+css布局无法避免的冗余标签完全严格按照w3c的标准来布局是不可能的,想要在不同版本的浏览器下都表现出漂亮的网页,几乎无可避免地要使用一些多余的标签。
总结而言,div布局必须用到冗余标签的地方主要有三个:
一是背景图和背景色,当内层元素的css属性全部为“float:left”时,外层的背景将在mozilla等浏览器下无法显示。这个时候必须要在内外层之间嵌套一个背景层,或是在内层元素最后增加一个“clear:both”的空标签。
二是当页宽为绝对值时,必须在属性为float的并列元素外嵌套一个宽度为绝对值之和的div,以保证页面放缩时float元素不会“掉下去”。
三是当需要写底部信息栏时,因不能用position:absolute定位,而必须在所有float的并列元素之外嵌套一个div,以保证高度自动伸缩。同时底部信息栏应具有“clear:both”属性。
我最后的解决方法是,在最后加个<div class="clear"></div> ,然后定义.clear{clear:both;height:0px;} 就可以了。
上网搜了一下才找到解决的方法。
div+css布局无法避免的冗余标签完全严格按照w3c的标准来布局是不可能的,想要在不同版本的浏览器下都表现出漂亮的网页,几乎无可避免地要使用一些多余的标签。
总结而言,div布局必须用到冗余标签的地方主要有三个:
一是背景图和背景色,当内层元素的css属性全部为“float:left”时,外层的背景将在mozilla等浏览器下无法显示。这个时候必须要在内外层之间嵌套一个背景层,或是在内层元素最后增加一个“clear:both”的空标签。
二是当页宽为绝对值时,必须在属性为float的并列元素外嵌套一个宽度为绝对值之和的div,以保证页面放缩时float元素不会“掉下去”。
三是当需要写底部信息栏时,因不能用position:absolute定位,而必须在所有float的并列元素之外嵌套一个div,以保证高度自动伸缩。同时底部信息栏应具有“clear:both”属性。
我最后的解决方法是,在最后加个<div class="clear"></div> ,然后定义.clear{clear:both;height:0px;} 就可以了。
0 0
- DIV CSS用float时引起背景不正常显示的解决办法
- div css用float时引起背景不正常显示的解决办法
- Float引起div自适应高度无效的解决办法
- DIV+CSS实现的拖动+隐藏/显示效果+背景变暗
- Office2013 图标显示不正常的解决办法
- 关于CSS中内层使用float导致外层的背景无法显示的问题的解决方法
- 关于CSS中内层使用float导致外层的背景无法显示的问题的解决
- CSS设置div背景渐变显示
- 【内网不正常引起死机解决办法】
- div+css div不设置高度背景颜色或外边框不能显示的解决方法
- 关于div--css-float的感想
- css中float引起父元素的高度塌陷
- CSS div float
- DIV+CSS之float
- CSS+DIV float 定位
- 解决div+css设置在IE8正常显示,IE6不正常显示
- html中css无法控制下拉框select显示的解决办法用div+css来模仿的实例
- css 浮动float 的一些解决办法
- C语言学习之关键字第五讲
- 原子操作
- 【Android】实现XML解析的几种技术
- java实现深复制:clone()及序列化
- 探索xpose如何通过修改手机数据来实现刷某积分墙某团购的
- DIV CSS用float时引起背景不正常显示的解决办法
- php正则表达式验证 preg_match
- Django 将数据批量插入数据库bulk_create()
- Hibernate框架详解(三)框架中的关系映射
- YTU 1006: Hero In Maze
- MTK 平台支持设备树的添加流程
- Javascript实现图片的预加载的完整实现
- UICollectionView的简单使用
- linux内核启动2_setup_arch函数