flex布局相容性問題

2022-06-17 04:36:11 字數 1391 閱讀 5709

標誌:display: box; or a property that is box- (eg. box-pack)

標誌:display: flexbox; or the flex() function or flex-pack property

標誌:display: flex/inline-flex; and flex- properties

新增了對flex項z-index的規定

沒有大的改動

p.s.注意2015的是w3c editor』s draft,只是個草案,還處於修修改改的階段,還沒有徵集瀏覽器**商的意見

關於flex的w3c規範:

瀏覽器相容性可以參考caniuse:

根據caniuse的資料可以總結如下:

所以需要考慮新版本2012:

而android需要考慮舊版本2009:

上面分析得很清楚,針對需要相容的目標使用對應版本的語法就好了,下面給出常用的布局**:

/*

子元素-平均分欄

*/.flex1

/*父元素-橫向排列(主軸)

*/.flex-h

/*父元素-橫向換行

*/.flex-hw

/*父元素-水平居中(主軸是橫向才生效)

*/.flex-hc

/*父元素-縱向排列(主軸)

*/.flex-v

/*父元素-縱向換行

*/.flex-vw

/*父元素-豎直居中(主軸是橫向才生效)

*/.flex-vc

/*子元素-顯示在從左向右(從上向下)第1個位置,用於改變源文件順序顯示

*/.flex-1

/*子元素-顯示在從左向右(從上向下)第2個位置,用於改變源文件順序顯示

*/.flex-2

為了更好的相容性,我們需要給容器宣告flex-h/flex-v,而不是一般的flex:

/*

父元素-flex容器

*/.flex

所以,建議在需要相容android時(2009版語法)採用flex-h/flex-v宣告容器使用flex模式,在不需要相容android時(2012版語法)使用flex設定容器

注意:上面給的**並不是完全相容各個高階瀏覽器的,但要比任何其它現有**相容性好,具體相容性測試結果請看demo

測試結果:

注意 :從測試結果可以發現flex布局會把偽元素當作元素來分配空間(文件好像有提到給偽元素設定position: fixed/absolute;可以避免這一情況,本文暫未驗證),但我們一般希望偽元素只有裝飾作用,不影響布局,這與我們的預期不一致。所以, 當flex布局中有偽元素時要特別小心,盡可能多地進行瀏覽器相容性測試,或者改用float布局

**:

flex布局的相容性問題

標誌 display box or a property that is box eg.box pack 標誌 display flexbox or the flex function or flex pack property 標誌 display flex inline flex and fle...

piczoom相容性問題 相容性問題

1.文字本身的大小不相容。同樣是font size 14px的宋體文字,在不同瀏覽器下佔的空間是不一樣的,ie下實際佔高16px,下留白3px,ff 下實際佔高17px,上留白1px,下留白3px,opera下就更不一樣了。解決方案 給文字設定 line height 確保所有文字都有預設的 lin...

相容性問題

原文 1.ie浮動 margin 產生的雙倍距離 box 2.display inline block ie6,7下不相容 用float left 3.position fixed ie6不支援 ie6下用position和js模擬,或者完全不用,用position和js模擬 4.cursor ha...