css3中的弹性盒模型大家都不陌生,但是能否在ie6中实现呢?第三方库中涉及到的页少之又少,也有一部分css框架中支持各种布局,下面给出我用的盒模型样式(为了以后copy方便而已):
/*********************************** *兼容盒模型 by awen *使用float实现的,所以大家注意页面展现的dom排序和代码中是不一样的(float:right,你懂的) ************************************/ .shbox-item-l, .shbox-item-r { min-height: 1px; /*防止标准浏览器下没有设置高度造成布局混乱*/ _display:inline; /*hack ie6 dubble margin*/ } .shbox-item-l { float: left; } .shbox-item-r { float: right; } /*强制换行*/ .shbox-item_l, .shbox-item-r, .shbox-item-flex { word-wrap: break-word; word-break: normal; } /*模拟flex,一般标准的都是全部使用float,但是特殊情况可以使用flex,请注意 * 1 一个box只支持一个flex * 2 flex中自定义margin是无效的 * 3 使用flex后,ie6下,flex左右两个float需要解决3像素bug, * 可以使用shbox-flex-l(对应flex左边的float),和shbox-flex-r(对应flex右边的float)两个样式; * 当然不是很严谨的话也可以不用。 */ .shbox-item-flex { overflow:hidden; _height: 1%;/*for ie6 防止文档流包裹 也可以用这个:_display:inline-block;*/ } /* *ie6下的flex可能会有3像素bug */ .shbox-flex-l { _margin-right:-3px; } .shbox-flex-r { _margin-left:-3px; }
下面看例子,当前页面也可以再ie下看效果,也可以下载 demo :
-
shbox-item-l
- li2
- li3
- li4
- li5
-
shbox-item-r
- li2
- li3
- li4
- li5
shbox-item-r
shbox-item-flex
shbox-item-l
shbox-item-r
oooooooooooooooooooooooooooooooooo