IE9的大css檔案截斷問題

看風景就發表於2018-09-12

最近做專案除錯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

相關文章