最近做專案除錯IE9的相容性,遇到問題,樣式應用不上去,在其他瀏覽器中是正常的。
經過查詢,判定是IE9的css截斷問題。
1. IE9截斷判定方法
1. 開啟IE Developer Tools,在網路皮膚,進行捕獲,抓取到的css檔案是完整的
2. 開啟IE Developer Tools的HTML皮膚,在右側樣式皮膚中,點選最右側對應的該css檔案,
或者在css皮膚中選擇該css檔案,將滾動條拉到底,可以看到css文字是否解析完整
2. IE9截斷檔案大小
這個沒有明確的標準。
一個說法是單個css檔案不能超過250k。
一個說法是單個css檔案不能超過4000+ selectors。
所以儘量將單個css檔案大小控制在200K以內,應該沒問題。
3. webpack的css檔案分拆
使用css-split-webpack-plugin外掛進行檔案大小分割,如果使用了OptimizeCSSAssetsPlugin外掛,則要禁止其修改
@keyframes的名字。
參考:https://blog.csdn.net/napoleonxxx/article/details/80292006
https://segmentfault.com/a/1190000005966818