最近做项目调试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. 基于Spring的最简单的定时任务实现与配置(二)

    接上一篇,原本我以为我实现的方式很简单了,在准备写(一)的时候,就去查了查别人是怎么实现定时任务的.不查还好,这一查,发现还有更简单的.所以就会有这篇文章. 本文主要是讨论,在完成Spring 项目搭 ...

  2. VS2015 更改C++模式

    亲爱的小伙伴,有没有发现你们的VS2015装完以后和老江湖们用的不一样了,人家的界面打开是这样的 而你的界面打开是这样的 虽然看是只有一左一右的区别,但是内在确实有好多不一样. 想不想想老江湖一样,拥 ...

  3. ant-design学习准备_1

    在学习ant-desin过程中,发现很多知识都不清楚,从现在开始,每天将自己学习到的知识进行一个总结记录,前端大佬勿扰勿喷.先介绍几个基础概念和一些常用命令: 1.什么是脚手架 我们经常在各个博客论坛 ...

  4. phpanalysis提取关键字

    最近在开发一个文章模块功能,设计那边提出要给文章生成对应标签,用于文章关联推送,这里和大家分享一下实现过程: 这里需要用到PHPAnalysis,下载链接如下 链接:https://pan.baidu ...

  5. 怎么给kibana加上权限?

    更新:2016-05-20 09:36 通过向Elastic了解,他们目前开发的5.0版本支持更好的权限定制,粒度达到字段级别.他们预计今年就可以上线,如果你不是有一个旧版本的kibanba非要维护不 ...

  6. 深度学习笔记 (一) 卷积神经网络基础 (Foundation of Convolutional Neural Networks)

    一.卷积 卷积神经网络(Convolutional Neural Networks)是一种在空间上共享参数的神经网络.使用数层卷积,而不是数层的矩阵相乘.在图像的处理过程中,每一张图片都可以看成一张“ ...

  7. wwnjld第二轮迭代测试报告

    1.引言 1.1测试报告目的 被测试报告为wwnjld小组我们的时间管理软件的第二轮迭代所写的软件测试报告.在经过本小组大家不懈的努力之下,我们小组第二轮迭代的产品终于新鲜出炉了.这次测试小组的主要成 ...

  8. 2d命令行小游戏源码

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  9. lintcode-33-N皇后问题

    33-N皇后问题 n皇后问题是将n个皇后放置在n*n的棋盘上,皇后彼此之间不能相互攻击. 给定一个整数n,返回所有不同的n皇后问题的解决方案. 每个解决方案包含一个明确的n皇后放置布局,其中" ...

  10. C# Winform防止闪频和再次运行

    其实想实现只允许运行一个实例很简单,就是从program的入口函数入手.有两种情况: 第一种,用户运行第二个的时候给一个提示: using System; using System.Collectio ...