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.csdn.net/napoleonxxx/article/details/80292006
     https://segmentfault.com/a/1190000005966818

原文地址:https://www.cnblogs.com/mengff/p/9637182.html

时间: 2024-10-07 15:02:35

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

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

 什么是Mime类型? MIME(Multipurpose Internet Mail Extensions)多用途互联网邮件扩展类型就是设定某种扩展名的文件用一种应用程序来打开的方式类型,当该扩展名文件被访问的时候,浏览器会自动使用指定应用程序来打开.多用于指定一些客户端自定义的文件名,以及一些媒体文件打开方式.  为什么会出现错误?  在IE9以上的IE浏览器中,尤其是本地环境下,在没有配置服务器的环境下,会遇到外链的CSS文件无法加载成功,而导致想要的效果没有实现!当你遇到这样的问题时,你

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

原因:屏幕大小不一样,网站看起来总觉得怪怪的,所以,针对不同大小的屏幕,写了不同的css,写完了,要解决的问题就是:怎么根据屏幕的大小来引用不同的CSS,下面就是解决方法了. 解决方法:首先,在head标签里面先引用一个通用的CSS文件,如下: <link href="Styles/Style.css" id="css" rel="stylesheet" type="text/css" /> 这时候,你会发现,这个

【前端笔记】在HTML中画一条横线和IE10支持引用的CSS文件

首先大家国庆节快乐啊~~~ 这是我第一个在省外的国庆节,毕竟今年毕业了哇,奋斗的我们要加油~~~ 最近我会不断总结上一个WEB项目所用到的前端知识,和大家一起分享哈~~~ 言归正传,怎么画一条横线?我想到的有三种方法,但是各自样式不一,所以大家按需求来哦. 1.<hr />标签,对的,这个标签就代表一条横线,样式大概是这样的,如图(a与b之间哦): <html> <head></head> <body> <div>a</div&

sql2008日志文件截断

日志文件比较大时,使用语句减少大小. USE DATABASENAME;GO-- Truncate the log by changing the database recovery model to SIMPLE.ALTER DATABASE DATABASENAMESET RECOVERY SIMPLE;GO-- Shrink the truncated log file to 1 MB.DBCC SHRINKFILE (DATABASENAME_Log, 1);GO-- Reset the

引入CSS文件的方式,以及link与@import的区别

一.引入css的方式 在HTML中引入css的方法主要有4种:行内式.内嵌式.链接式和导入式. 1.行内式 <div style="background:yellow;"></div> 行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用. 2.内嵌式 <html> <head> <style> ..// 此处添加css代码 </style> </head> <

HTML页面和CSS文件

HTML页面和CSS文件,如男人和女人. 每个HTML都希望自己能呈现给别人亲和的引入注目的感觉,CSS可以帮助HTML实现这样的目的. 虽然没有CSS,HTML也可以自己完成同样的修饰,但是可能会一片混乱,不像有CSS的HTML那样,让内容和修饰分开.而仅有CSS,很多想要的效果却也无法看出. 有一些呈现的布局效果是HTML自身不能实现的,比如CSS里的伪类.组合.就想男人没有女人,也不会体现出他对家的责任,对爱人的关怀. 当HTML页面和CSS文件在一起久了,HTML页面里会不断的增加新的东

css文件分类

简介 CSS(层叠样式表)是一门历史悠久的标记性语言,同 HTML 一道,被广泛应用于万维网(World Wide Web)中.HTML 主要负责文档结构的定义,CSS 负责文档表现形式或样式的定义. 作为一门标记性语言,CSS 的语法相对简单,对使用者的要求较低,但同时也带来一些问题:CSS 需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用,尤其对于非前端开发工程师来讲,往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码,造成这些困难的很大原因源于 CSS

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

iOS之在webView中引入本地html,image,js,css文件的方法 2014-12-08 20:00:16CSDN-sky_2016-点击数:10292 项目需求 最近开发的项目,需要一个webView,同时这个webView会需要引入一些项目中的资源: 一个本地的html文件,作为webView的模板 两张loading图片,在图片未加载的时候进行占位 jquery.js,scrollLoading.js 也是本地的,实现滚动加载图片功能 然后就开始了漫长的Google历程. 在w

css文件加载:@import和link的区别

刚看了一个百度试题:请简述CSS加载方式link和@import的区别? 平时一般都用link,也知道css的加载方式,但还真的没有仔细研究过其之间的差别,查了一些资料,大致总结如下: @impot使用方法: <style type="text/css"> <!-- @import url("css/main.css"); @import url("css/base.css"); --> </style> li