最近做项目调试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

IE9的大css文件截断问题的更多相关文章

  1. IE9以上 CSS文件因Mime类型不匹配而被忽略 其他浏览器及IE8以下显示正常

     什么是Mime类型? MIME(Multipurpose Internet Mail Extensions)多用途互联网邮件扩展类型就是设定某种扩展名的文件用一种应用程序来打开的方式类型,当该扩展名 ...

  2. [文章存档]Azure .net WebAPP的js/css文件过大导致访问慢的解决办法

    https://docs.azure.cn/zh-cn/articles/azure-operations-guide/app-service-web/aog-app-service-web-qa-j ...

  3. js或css文件后面的参数是什么意思?

    经常看到不少导航网站测样式或js文件后面加了一些参数,主要是一你为一些并不经常更新的页面重新加载新修改的文件. 经常遇到页面里加载的js与css文件带有参数,比如: <script type=& ...

  4. js 根据屏幕大小调用不同的css文件

    原因:屏幕大小不一样,网站看起来总觉得怪怪的,所以,针对不同大小的屏幕,写了不同的css,写完了,要解决的问题就是:怎么根据屏幕的大小来引用不同的CSS,下面就是解决方法了. 解决方法:首先,在hea ...

  5. 根据浏览器显示界面大小变换,替换css文件方法

    在1024屏幕下,选择适配1024屏幕的css文件, 在大于1024屏幕下,选择适配大屏幕的css文件. 在html中的head标签中引用css文件时,加入media属性. 例: <link r ...

  6. iOS之在webView中引入本地html,image,js,css文件的方法 - sky//////////////////////////////////////ZZZZZZZZZZZZZZZ

    iOS之在webView中引入本地html,image,js,css文件的方法   2014-12-08 20:00:16CSDN-sky_2016-点击数:10292     项目需求 最近开发的项 ...

  7. html引入css文件

    在HTML中,引入CSS的方法主要有行内式.内嵌式.导入式和链接式. 行内式:即在标记的style属性中设定CSS样式,这种方式本质上没有体现出CSS的优势,因此不推荐使用.例: <html&g ...

  8. 怎样将多个CSS文件导入一个CSS文件中

    问题: 在HTML中引入css的其中的两个方法:    导入式和链接式的目的都是将一个独立的css文件引入一个文件中,二者的区别不大,事实上,二者最大的区别在于链接式使用html的标记引入外部css文 ...

  9. js或css文件合并的三种方式推荐

    源文档 <http://www.jb51.net/article/32834.htm> 在Web项目的开发中,js,css文件会随着项目的开发变得越来越多,越来越大,这就给给性能方面带来一 ...

随机推荐

  1. Selenium(Python) ddt数据驱动

    首先, 添加ddt模块: import unittestfrom time import sleep from ddt import ddt, data, unpack# 导入ddt模块from se ...

  2. HTMLTestRunner.py(Python3)

    """A TestRunner for use with the Python unit testing framework. Itgenerates a HTML re ...

  3. js写的数码时钟,在“最小化”浏览器 或者 “切换网页”是动画效果好像不对

    一.问题 在“最小化”浏览器 或者 “切换网页”是动画效果不对,不知道哪里出了问题???是不是”最小化“时网页定时器关掉了,还是其他什么原因啊 ???? 二.HTML代码如下 <div id=& ...

  4. Android开发-API指南-<receiver>

    <receiver> 英文原文:http://developer.android.com/guide/topics/manifest/receiver-element.html 采集(更新 ...

  5. Hadoop,MapReduce操作Mysql

    前以前帖子介绍,怎样读取文本数据源和多个数据源的合并:http://www.cnblogs.com/liqizhou/archive/2012/05/15/2501835.html 这一个博客介绍一下 ...

  6. LinQ to SQL 及 non-LinQ方式实现Group的Performance对比

    拥有476550数据的一张数据表.使用其中的某个字段分组,然后按该字段进行排序.该需求分别使用LinQ to SQL和non-LinQ的方式实现,然后来看一下performance对比. LinQ w ...

  7. Python面向对象-访问限制

    在Class内部,可以有字段,方法和属性,而外部代码可以通过直接调用实例变量的方法来操作数据, (1)私有普通字段 比如对于下面的Student类,name字段可以在外面通过对象进行直接访问: cla ...

  8. js经典试题之w3规范系列

    js经典试题之w3规范系列 1:w3c 制定的 javascript 标准事件模型的正确的顺序? 答案:事件捕获->事件处理->事件冒泡 解析:先事件捕获从windows > doc ...

  9. JS原型与面向对象总结

    ECMAScript有两种开发模式:1.函数式(过程化),2.面向对象(OOP).面向对象的语言有一个标志,那就是类的概念,而通过类可以创建任意多个具有相同属性和方法的对象.但 是,ECMAScrip ...

  10. iOS- 封装单例宏

    在项目中,我们需要全局只有一个实例,节省不必要的内存,这时我们就需要使用里单例生成对象. 这时把单例的代码封装成宏,就能方便我们下次使用了. 在.h .m里直接导入头文件,调用 传入类名即可! sin ...