關於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
相關文章
- 彈性盒模型Flex指南模型Flex
- 關於css屬性calc對於ie的態度CSS
- 彈性盒模型,flex佈局模型Flex
- 彈性盒模型中flex-grow 和flex的區別模型Flex
- 前端筆記(關於css盒模型知識整理)前端筆記CSS模型
- 關於盒模型相關的問題模型
- css 盒模型CSS模型
- CSS盒模型CSS模型
- 【新彈性盒】
- 精通CSS盒模型CSS模型
- CSS盒模型深入CSS模型
- css之盒模型CSS模型
- css-盒模型CSS模型
- CSS的兩種盒模型CSS模型
- flexbox(彈性盒佈局模型),以及適用場景Flex模型
- CSS2中盒模型與佈局的一些概念關係CSS模型
- css&&js盒模型CSSJS模型
- 好程式設計師web前端分享CSS3彈性盒程式設計師Web前端CSSS3
- 模型關聯中繫結屬性到父模型怎麼實現模型
- 關於 CSS 盒子模型CSS模型
- css盒子模型與盒模型的浮動CSS模型
- Css規範整理:2、css盒模型CSS模型
- 盒模型-深入理解盒模型及相關概念模型
- CSS系列 (04):盒模型詳解CSS模型
- 前端面試2:CSS盒模型前端面試CSS模型
- 關於CSS中設定overflow屬性的值為hidden的相關理解CSS
- CSS實現文字豎排顯示(相容IE6/IE7)CSS
- laravel Eloquent模型 關於模型關聯屬性獲取Laravel模型
- 關於CSS中的float可能出現的小問題CSS
- 如何實現彈性架構架構
- css盒模型以及如何計算盒子的寬度CSS模型
- css中關於table的相關設定CSS
- 關於分類的線性模型的討論模型
- css佈局系列1——盒模型佈局CSS模型
- 一文搞懂flex(彈性盒佈局)Flex
- 前端面試3:flex彈性盒佈局前端面試Flex
- CSS 屬性篇(四):Flex彈性盒子CSSFlex
- CSS:彈性佈局(display:flex)CSSFlex