关于ie中实现弹性盒模型-我的css

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