解決UC瀏覽器或微信瀏覽器上flex相容問題

2022-05-23 01:39:10 字數 1120 閱讀 8514

在uc瀏覽器上使用display:flex;時會不起作用,要加上相容性寫法,如下

display: -webkit-box;      /*

old - ios 6-, safari 3.1-6

*/display: -moz-box; /*

old - firefox 19- (buggy but mostly works)

*/display: -ms-flexbox; /*

tweener - ie 10

*/display: -webkit-flex; /*

new - chrome

*/display: flex;

使用flex:1;時也要新增如下相容性寫法:

-webkit-box-flex: 1;      /*

old - ios 6-, safari 3.1-6

*/ -moz-box-flex: 1; /*

old - firefox 19-

*/width: 20%; /*

for old syntax, otherwise collapses.

*/ -webkit-flex: 1; /*

chrome

*/ -ms-flex: 1; /*

ie 10

*/flex: 1; /*

new, spec - opera 12.1, firefox 20+

*/

但是,一定要注意:如果作用於flex:1的元素為input或button時,只用flex:1;是不起作用的,還要加上display:block;才能起作用。

以下為小案例

flex

flex

flex

flex

flex

flex

flex

flex

flex

flex

button

微信瀏覽器

編輯 1.登入 當和某個聯絡人聊天時,聊天面板會並列在聯絡人面板的右邊,浮在網頁之上。點選網頁區域,聊天面板會自動收起。點選聯絡人面板右上角的新建聊天按鈕,就可以選擇與單個人聊天,或多個人群聊 在與單個人聊天時 2 點選聊天面板右上角上的 號,可增加其他聯絡人新建群聊 在與多個人群聊時,點選聊天面板...

微信瀏覽器分享

首先說 得配合後台去配置如下紅框的資料,黃框是可以分享到 引入資源 var obj new object ajax type post success function data noncestr obj noncestr signature obj signature wx.ready funct...

瀏覽器 瀏覽器高效搜尋

一 常見場景 以場景的形式來說明 1 場景1 網路上查詢一本書的 指定文件型別 如pdf 如 搜尋關鍵字 c primer plus 的 pdf 版本 輸入 格式 關鍵字 空格 filetype pdf 例項 c primer plus中文版 filetype pdf關鍵字 filetype 2 場...