web flex布局瀏覽器相容處理

2021-07-10 17:11:09 字數 1148 閱讀 4036

標誌: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的資料可以總結如下:

ie10部分支援2012,需要-ms-字首

android4.1/4.2-4.3部分支援2009,需要-webkit-字首

safari7/7.1/8部分支援2012,需要-webkit-字首

ios safari7.0-7.1/8.1-8.3部分支援2012,需要-webkit-字首

所以需要考慮新版本2012:

而android需要考慮舊版本2009:

三.瀏覽器相容的flex語法

/* 子元素-平均分欄 */

.flex1

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

.flex-h

/* 父元素-橫向換行 */

.flex-hw

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

.flex-hc

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

.flex-v

/* 父元素-縱向換行 */

.flex-vw

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

.flex-vc

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

.flex-1

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

.flex-2

瀏覽器相容

瀏覽器相容問題一 不同瀏覽器的標籤預設的外補丁和內補丁不同 問題症狀 隨便寫幾個標籤,不加樣式控制的情況下,各自的margin 和padding差異較大。碰到頻率 100 解決方案 css裡 備註 這個是最常見的也是最易解決的乙個瀏覽器相容性問題,幾乎所有的css檔案開頭都會用萬用字元 來設定各個標...

瀏覽器相容

1 css bug css樣式在各瀏覽器中解析不一致的情況,或者說 css樣式在瀏覽器中不能正確顯示的問題稱為 css bug.2 css hack css中,hack 是指一種相容 css在不同瀏覽器中正確顯示的技巧方法,因為它們都屬於個人對 css 的非官方的修改,或非官方的。有些人更喜歡使用 ...

瀏覽器相容

所謂的瀏覽器相容性問題,是指因為不同的瀏覽器對同一段 有不同的解析,造成頁面顯示效果不統一的情況。在大多數情況下,我們的需求是,無論使用者用什麼瀏覽器來檢視我們的 或者登陸我們的系統,都應該是統一的顯示效果。所以瀏覽器的相容性問題是前端開發人員經常會碰到和必須要解決的問題。在學習瀏覽器相容性之前,我...