IE11的CSS兼容性問題

　　最近測試給了我一大堆BUG，一瞅發現全是IE11的。吐槽一下這個瀏覽器真的比較特立獨行。不少默認的樣式跟別的瀏覽器不一樣，並且最明顯的一點應該是padding左右內邊距每每比別的瀏覽器大了一倍。可是當須要修改的時候又頭疼了。若是改變原有的padding值，那麼在IE11生效了。別的瀏覽器又有問題了。因而在網上搜了一下有沒有專門針對IE11的CSShack，就是隻對IE11生效的CSS樣式，一查還真有。就是在CSS樣式文件中加一個@media screen and(-ms-high-contrast:active),(-ms-high-contrast:none){裏面是你的樣式}。

　　好比，我在chrome瀏覽器中給一個div設置樣式

　　div{

　　　　padding:0 12px;

　　}

　　那麼，在IE11中想要實現上面效果，須要在這個下面再添加一行樣式　　

　　div{

　　　　padding:0 12px;

　　}

　　@media screen and(-ms-high-contrast:active),(-ms-high-contrast:none) {

　　　　div{padding:0 6px;}

　　}

　　這裏須要注意一下IE11的樣式要寫在最後面防止被覆蓋，當瀏覽器爲IE11時，@media中的樣式會被執行一遍。

　　還有一個就是IE11針對h5的表單驗證部分，驗證失敗後input標籤會出現一個紅色的框，比較醜。這個時候你只要針對專門的input標籤，增長一個input{outline:none};就能夠將紅色的邊框去掉了。

 

 

2016/01/15更新

　　今天大拿直接一行代碼把我以前的IE11兼容性問題全解決了。不服不行。小夥伴們下次遇到兼容性問題記得先加上這行代碼試試，不行再按照上面的方法來吧TAT，貼出代碼

　　　　

　　　　* {
　　　　　　box-sizing: content-box;
　　　　　　-moz-box-sizing: inherit;
　　　　　　-webkit-box-sizing: inherit;
　　　　　}