摘要:最新開發的項目用了的新特性布局,遇到了兼容性的問題。那么新舊版本是什么布局分為舊版本,過渡版本,以及現在的標準版本。所以如果你只是寫新版本的語法形式,是肯定存在兼容性問題的。
最新開發h5的項目用了css的新特性flex布局,遇到了CSS兼容性的問題。在網上找到了如下的解決辦法。
我寫頁面的時候用到過很多的flex布局,覺得非常好用。下面附上一篇不錯的flex布局介紹的文章。?
Flex 布局教程想了解的可以自己去看看這篇博文,或者自己百度,這里先部多做介紹,我們主要來說一說flex布局的兼容性問題。
大家可能想問了,flex布局為什么會存在兼容性問題啊?
之所以存在兼容性問題,是因為技術在不斷的更新,有些舊的瀏覽器只支持舊語法的書寫方式,所以就出現所謂的兼容性問題。
what?那么新舊版本是什么?
flex布局分為舊版本dispaly: box;,過渡版本dispaly: flex box;,以及現在的標準版本display: flex;。所以如果你只是寫新版本的語法形式,是肯定存在兼容性問題的。
Android?
2.3 開始就支持舊版本?display:-webkit-box;
4.4 開始支持標準版本?display: flex;
IOS?
6.1 開始支持舊版本?display:-webkit-box;
7.1 開始支持標準版本display: flex;
PC?
ie10開始支持,但是IE10的是-ms形式的。
下面是各個瀏覽器的支持情況
how?所以我們該如何進行兼容性的寫法呢?
盒子的兼容性寫法
.box{ display: -webkit-box; /* 老版本語法: Safari, iOS, Android browser, older WebKit browsers. */ display: -moz-box; /* 老版本語法: Firefox (buggy) */ display: -ms-flexbox; /* 混合版本語法: IE 10 */ display: -webkit-flex; /* 新版本語法: Chrome 21+ */ display: flex; /* 新版本語法: Opera 12.1, Firefox 22+ */}
子元素的兼容性寫法
.flex1 { -webkit-box-flex: 1 /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OLD - Firefox 19- */ -webkit-flex: 1; /* Chrome */ -ms-flex: 1 /* IE 10 */ flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */}
這種兼容寫法不一定起效的。尤其是在底版本安卓系統中。因為什么呢?因為所有都是向下兼容的,所以寫法的順序一定要寫好了才起作用。就是把舊語法寫在底下,個別不兼容的移動設置才會識別,哪些是舊的語法,你懂的。那些帶box的一定要寫在最下面即可。
所以上面的兼容寫法應該是這樣的才對:
.box{ display: -webkit-flex; /* 新版本語法: Chrome 21+ */ display: flex; /* 新版本語法: Opera 12.1, Firefox 22+ */ display: -webkit-box; /* 老版本語法: Safari, iOS, Android browser, older WebKit browsers. */ display: -moz-box; /* 老版本語法: Firefox (buggy) */ display: -ms-flexbox; /* 混合版本語法: IE 10 */ } .flex1 { -webkit-flex: 1; /* Chrome */ -ms-flex: 1 /* IE 10 */ flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */ -webkit-box-flex: 1 /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OLD - Firefox 19- */ }總結
這樣來試試吧,保證不會再出現返工修改的問題。?
good luck!
我不是大神,也不是什么牛人,寫這個號的目的是為了記錄我自學 web全棧 的筆記。
有興趣的朋友可以掃下方二維碼公眾號—— 愛寫bugger的阿拉斯加
分享 web 開發相關的技術文章,熱點資源,全棧程序員的成長之路
和大家一起交流成長。
只要關注公眾號并回復 福利 便送你六套、并且每套價值 3999 元的視頻資源: Python、Java、Linux、Go、vue、react、javaScript
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/116849.html
摘要:分配空間原理影響布局分配空間的屬性有三個,分別是和。伸縮項目擴展寬度項目容器寬度項目寬度或項目設置的總和對應的比例拉伸后伸縮項目寬度原伸縮項目寬度擴展寬度我們來計算一下上面栗子中第一個伸縮項目拉伸后的寬度。 在項目中,我們還會大量使用到flexbox的新舊屬性,但大多數人一般只會寫新屬性,舊屬性交由autoprefixer處理,但其實完成同樣功能的新舊屬性表現形式卻不盡相同。還有部分人...
摘要:絕對底部前端掘金來自國外的設計達人,純,可以實現當正文內容很少時,底部位于窗口最下面。有效解決圖片使用單位邊角缺失的問題前端掘金起因在移動端使用布局時圖片也需要用單位。 CSS 絕對底部 - 前端 - 掘金來自國外的設計達人,純CSS,可以實現: 當正文內容很少時,底部位于窗口最下面。當改變窗口高度時,不會出現重疊問題。甚至,創造該CSS的人還專門成立一個網站介紹這個CSS底部布局方案...
閱讀 2064·2023-04-25 22:58
閱讀 1408·2021-09-22 15:20
閱讀 2693·2019-08-30 15:56
閱讀 1986·2019-08-30 15:54
閱讀 2101·2019-08-29 12:31
閱讀 2728·2019-08-26 13:37
閱讀 592·2019-08-26 13:25
閱讀 2097·2019-08-26 11:58