最近做项目调试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. 使用httpClient获取请求cookie

    package mytest; import java.util.ArrayList; import java.util.List; import org.apache.http.NameValueP ...

  2. Linux命令应用大词典-第40章 网络客户端

    40.1 elinks:字符模式的Web浏览器 40.2 wget:从Web网站下载文件 40.3 curl:传输URL 40.4 lynx:通用分布式信息的万维网浏览器 40.5 lftp:实现文件 ...

  3. 韦大仙--python对文件操作

    文件操作: 对文件操作流程 打开文件,得到文件句柄并赋值给一个变量 通过句柄对文件进行操作 关闭文件 现有文件如下 Somehow, it seems the love I knew was alwa ...

  4. python程序设计——函数设计与调用

    一.函数定义与调用 def 函数名([参数列表]): '''注释''' 函数体 # 输出小于n的斐波那契数 >>def fib(n): a,b=1,1 while a < n: pr ...

  5. js如何判断客户端是iOS还是Android等移动终端

    判断原理:JavaScript是前端开发的主要语言,我们可以通过编写JavaScript程序来判断浏览器的类型及版本.JavaScript判断浏览器类型一般有两种办法,一种是根据各种浏览器独有的属性来 ...

  6. [Clr via C#读书笔记]Cp6类型和成员基础

    Cp6类型和成员基础 成员 常量:字段(静态字段和实例字段):实例构造器:类型构造器(用于静态字段的构造):方法(静态方法和实例方法):操作符重载(本质是一个方法):转换操作符:属性(本质还是方法): ...

  7. C二维数组行为空,列不为空

    二维数组: 处理二维数组得函数有一处可能不太容易理解:数组的行可以在函数调用时传递,但是数组的列却只能被预置在函数内部. eg: #define COLS 4 int sum(int ar[][COL ...

  8. 十面阿里,七面头条,六个Offer,春招结束

    作者:jkgeekjack链接:https://www.nowcoder.com/discuss/80156?type=0&order=0&pos=13&page=2来源:牛客 ...

  9. HDU 3260/POJ 3827 Facer is learning to swim(DP+搜索)(2009 Asia Ningbo Regional)

    Description Facer is addicted to a game called "Tidy is learning to swim". But he finds it ...

  10. /etc/fstab 文件如何填写(转)

    转载自 http://hi.baidu.com/jingzhongchen/blog/item/8e6f552dcead7ce98b139952.html 看你对/etc/fstab文件了解多少?   ...