div css用float时引起背景不正常显示的解决办法
2017-08-29 20:25
363 查看
当div里面套嵌多个用float定义的层是,背景图没有办法在firefox里面显示。上网搜了一下才找到解决的方法。
div+css布局无法避免的冗余标签,完全严格按照w3c的标准来布局是不可能的,想要在不同版本的浏览器下都表现出漂亮的网页,几乎无可避免地要使用一些多余的标签。
总结而言,div布局必须用到冗余标签的地方主要有三个:
一是背景图和背景色,当内层元素的css属性全部为“float:left”时,外层的背景将在mozilla等浏览器下无法显示。这个时候必须要在内外层之间嵌套一个背景层,或是在内层元素最后增加一个“clear:both”的空标签。
二是当页宽为绝对值时,必须在属性为float的并列元素外嵌套一个宽度为绝对值之和的div,以保证页面放缩时float元素不会“掉下去”。
三是当需要写底部信息栏时,因不能用position:absolute定位,而必须在所有float的并列元素之外嵌套一个div,以保证高度自动伸缩。同时底部信息栏应具有“clear:both”属性。
我最后的解决方法是,在最后加个
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用float时引起背景不正常显示的解决办法
- IE中子栏目使用float属性后背景不能正常显示原因及解决
- 给swf影片添加背景图片、IE显示正常,但chrome没有显示-解决办法
- png透明图片在ie6正常显示的纯css解决办法
- TortoiseGit状态图标不能正常显示的解决办法
- wm命令使用方法及LCD显示图标大小不正常时解决办法
- 以正常的途径删除文件后,xcode仍然显示文件意外丢失报警 解决办法
- Android ScrollView嵌套ExpandableListView显示不正常的问题的解决办法
- 关于某些图片在ie中不能正常显示的解决办法之一
- dede网站flash中图片不能正常显示解决办法
- 窗体显示不正常的解决办法
- MFC自绘工具栏在VS2008中显示不正常的解决办法
- android webview中的html代码 @media screen 在低版本系统下显示不正常的解决办法
- eclipse svn插件 不能正常显示属性的解决办法
- debian6.0安装后中文字体显示不正常的解决办法
- Highcharts在IE8中不能一次性正常显示的一种解决办法
- 非网络引用element-ui css导致图标无法正常显示的解决办法
- TortoiseGit状态图标不能正常显示的解决办法
- python matplotlib plot 数据中的中文无法正常显示的解决办法
- Windows XP下IE网页无法正常显示与无法打开新链接的部分解决办法