最近做项目调试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. Python拼接字符串的7种方法

    1.直接通过+操作: s = 'Python'+','+'你好'+'!'print(s) 打印结果: Python,你好! 2.通过join()方法拼接: 将列表转换成字符串 strlist=['Py ...

  2. APP九宫格滑动解锁的处理

    写手机自动化测试脚本关于APP九宫格滑动解锁方面采用了appium API 之 TouchAction 操作. 先是用uiautomatorviewer.bat查询APP元素坐标: 手工计算九宫格每个 ...

  3. javac 编译过程

    javac 编译过程     一.解析与填充符号表: 1.  语法.此法分析:          a) 语法分析:将源代码字符流转换为标记(Token:编译过程最小元素)集合.          b) ...

  4. 了解Python控制流语句——while 语句

    while 语句 Python 中 while 语句能够让你在条件为真的前提下重复执行某块语句. while 语句是 循环(Looping) 语句的一种.while 语句同样可以拥有 else 子句作 ...

  5. 【WXS】变量定义保留标识符

    以下字符不能作为变量名称定义: delete void typeof null undefined NaN Infinity var if else true false require this f ...

  6. 142. O(1) Check Power of 2【LintCode by java】

    Description Using O(1) time to check whether an integer n is a power of 2. Example For n=4, return t ...

  7. (python)leetcode刷题笔记 01 TWO SUM

    1. Two Sum Given an array of integers, return indices of the two numbers such that they add up to a ...

  8. PHP计算两个已知经纬度之间的距离

    /** *求两个已知经纬度之间的距离,单位为千米 *@param lng1,lng2 经度 *@param lat1,lat2 纬度 *@return float 距离,单位千米 **/ privat ...

  9. 【shell 每日一练6】初始化安装Mysql并修改密码

    一.简单实现mysql一键安装 参考:[第二章]MySQL数据库基于Centos7.3-部署 此脚本前提条件是防火墙,selinux都已经设置完毕: [root@web130 ~]# cat Inst ...

  10. java DTO 转 POJO

    如果这两个类的要转化的属性其属性名不一样的话,那只能用get和set方法赋值 如果你的两个类要转化的属性名都一样,那可以用org.springframework.beans.BeanUtils这个类来 ...