昨天
端网站上灰度,发现多个在
- pc
下的问题,描述和解决方案如下:
- IE8
把项目所有的
打包成单个文件,在现代的浏览器下是没有问题的,在
- css
下的
- IE11
模式也是没有问题。 但是在真实的
- IE8
下,发现某个页面的
- IE8
不能生效,百思不得其解。
- css
然后,几个人在代码层面逐步排查问题,排查方法是:写一个
样式,放在不同的位置去试试,看看是否生效,同时把不能原来不生效的 css 全部注释掉。
- body
已过几轮的调整,发现在主文件
引入新模块之后,再之后引入的
- index.css
都不能起做用。为了验证,把新模块注释又可以使用,又把老的注掉新的模块也能使用。猜测
- css
对
- ie8
的大小是有限制的。
- css
将新的模块单独打包成一个文件,同
一起引入页面,解决该问题。
- index.css
搜了一下网上,老外也有这个问题:目前不大清楚是
引起的,还是
- file size
引起的。我觉得应该是
- css selector
引起的,因为
- css selector
会被
- file size
压缩。改天实验一下。另外发现这个问题
- gzip
也有。
- ie9
相邻兄弟选择器控制,也就是
,来控制某个元素的显示,在
- +
下不能生效。
- ie8
借鉴网上的思路,让浏览器强制重绘。方案是,在需要重绘的地方,在
元素,增加一个
- body
,然后移除该
- css class
,就达到这个目的。这个
- css class
应该是没有任何效果的。
- css class
- $('body').addClass('ietest');
- $('body').removeClass('ietest');
链接:
使用伪类
,发现不起作用。
- ::before
改变伪类的
的内容,改成
- content
(容易被打包工具给处理掉) 之类的来解决。
- . 空格
- content: '.';
- content: ' ';
打包要保证打包行为的一致性。就是说在测试环境打出来的包和生产环境打出来的包行为要一致。碰到好几次问题就是在两个环境大包出来的不一样。这里调试碰到的问题是空格在生产环境中被压缩成空字符串了。
下的
- IE11
模式进行验证
- IE8
做过
下兼容性问题的人都应该知道,在
- IE
开发者工具下面有个
- IE11
的兼容模式,这很方便,一般情况下也够用。但是对前面所说的第一个问题(
- IE8
的大小问题),在这种兼容模式下是没有办法重现的。因此真的兼容
- css
的话,还是要用真实的
- IE8
环境来验证一下吧,模拟环境不可靠。
- IE8
的大小
- css
对于
的大小的问题以后应该做模块化处理。相关页面请加载自己的
- css
和基础的
- css
。其他不相关的
- css
不应该放在一起。这是对打包工具的要求。采用这种方案就能很好的解决
- css
大小的问题。
- css
- IE8
最根本的解决方案是,不去兼容
了。显然这是不可能的,因为网站流量中有一部分还是用的
- IE8
,没有到忽略不计的程度,
- IE8
还是逃不掉的。
- IE8
希望我说的对你有用,谢谢。
来源: http://www.cnblogs.com/htoooth/p/6443811.html