關於ie中實現彈性盒模型-我的css

awen1983發表於2019-05-13

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


相關文章