最近測試給了我一大堆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};就可以将紅色的邊框去掉了。
今天大拿直接一行代碼把我之前的IE11相容性問題全解決了。不服不行。小夥伴們下次遇到相容性問題記得先加上這行代碼試試，不行再按照上面的方法來吧TAT，貼出代碼* {
box-sizing: content-box;
-moz-box-sizing: inherit;
-webkit-box-sizing: inherit;
}