最近測試給了我一大堆BUG，一瞅發現全是IE11的。吐槽一下這個瀏覽器真的比較特立獨行。很多預設的樣式跟別的瀏覽器不同，而且最明顯的一點應該是padding左右內邊距往往比別的瀏覽器大了一倍。但是當需要修改的時候又頭疼了。如果改變原有的padding值，那麼在IE11生效了。別的瀏覽器又有問題了.....
最近測試給了我一大堆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;
}
