IE9的大css文件截断问题

最近做项目调试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.youkuaiyun.com/napoleonxxx/article/details/80292006
　　   https://segmentfault.com/a/1190000005966818

转载于:https://www.cnblogs.com/mengff/p/9637182.html