ios、安卓前端兼容性1

2.input框聚焦,ios出現outline或者陰影,安卓顯示正常

  • 解決方法
input:focus{outline:none} input:{-webkit-appearance: none;} 

3.關於flex佈局

  • 解決方法
    flex佈局對於低版本的安卓,不支持flex-wrap:wrap屬性,可是ios系統支持換行屬性,這個時候如何解決呢?固然是不使用換行啦。
    若是你的佈局必需要用到換行,那就在外層包裹一個大的div,而後設置幾個小div,每一個小div的佈局都是flex(可是不換行哦);(但願你能理解個人意思,若是不理解,能夠在下方留言,我會實時作出解答)

4.ios系統,會將數字當成電話號碼,致使變色

  • 解決方法
<meta name="format-detection" content="telephone=no"> <meta http-equiv="x-rim-auto-match" content="none"> 

將上面的代碼加入到<head>標籤中css

5.禁止安卓識別email

  • 解決方法
<meta content="email=no" name="format-detection" /> 

6.input 的placeholder屬性會使文本位置偏上

  • 解決方法
line-height: (和input框的高度同樣高)---pc端解決方法
line-height:normal ---移動端解決方法

7.input type=number以後,pc端出現上下箭頭

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0; }



做者:一個寫前端的姑娘

前端

相關文章
相關標籤/搜索