早上一開機(jī)打開微信電腦版，客戶就發(fā)了一個(gè)網(wǎng)頁bug，如圖
我一看肯定是在ie瀏覽器里出現(xiàn)的問題，于是打開IE11測(cè)試果然沒錯(cuò)，然后到網(wǎng)上搜索關(guān)于IE11hack兼容性解決方法，一搜索果然有，于是根據(jù)此方法改了一下CSS TOP高度就解決了
就是在CSS樣式文件中加一個(gè)@media screen and(-ms-high-contrast:active),(-ms-high-contrast:none){里面是你的樣式}。
比如，我在chrome瀏覽器中給一個(gè)div設(shè)置樣式
div{
padding:0 12px;
}
那么，在IE11中想要實(shí)現(xiàn)上面效果，需要在這個(gè)下面再添加一行樣式
div{
padding:0 12px;
}
@media screen and(-ms-high-contrast:active),(-ms-high-contrast:none) {
div{padding:0 6px;}
}
這里需要注意一下IE11的樣式要寫在最后面防止被覆蓋，當(dāng)瀏覽器為IE11時(shí)，@media中的樣式會(huì)被執(zhí)行一遍。
還有一個(gè)就是IE11針對(duì)h5的表單驗(yàn)證部分，驗(yàn)證失敗后input標(biāo)簽會(huì)出現(xiàn)一個(gè)紅色的框，比較丑。這個(gè)時(shí)候你只要針對(duì)專門的input標(biāo)簽，增加一個(gè)input{outline:none};就可以將紅色的邊框去掉了。
2016/01/15更新
今天大拿直接一行代碼把我之前的IE11兼容性問題全解決了。不服不行。小伙伴們下次遇到兼容性問題記得先加上這行代碼試試，不行再按照上面的方法來吧TAT，貼出代碼
* {
box-sizing: content-box;
-moz-box-sizing: inherit;
-webkit-box-sizing: inherit;
}
