快速记录 IE8 下三个问题

bug 查找 (一) 快速记录 IE8 下三个问题

昨天 pc 端网站上灰度，发现多个在 IE8 下的问题，描述和解决方案如下：

第一个问题是 css 文件过大

现象

把项目所有的 css 打包成单个文件，在现代的浏览器下是没有问题的，在 IE11 下的 IE8 模式也是没有问题。 但是在真实的 IE8 下，发现某个页面的 css 不能生效，百思不得其解。

然后，几个人在代码层面逐步排查问题，排查方法是：写一个 body 样式，放在不同的位置去试试，看看是否生效，同时把不能原来不生效的 css 全部注释掉。

已过几轮的调整，发现在主文件 index.css 引入新模块之后，再之后引入的 css 都不能起做用。为了验证，把新模块注释又可以使用，又把老的注掉新的模块也能使用。猜测 ie8 对 css 的大小是有限制的。

解决方案

将新的模块单独打包成一个文件，同 index.css 一起引入页面，解决该问题。

搜了一下网上，老外也有这个问题：目前不大清楚是 file size 引起的，还是 css selector 引起的。我觉得应该是 css selector 引起的，因为 file size 会被 gzip 压缩。改天实验一下。另外发现这个问题 ie9 也有。

链接

1. ie8-9-maximum-bytes-for-css-file

相邻兄弟选择器不能重绘的问题

现象

相邻兄弟选择器控制，也就是 +，来控制某个元素的显示，在 ie8 下不能生效。

解决方案

借鉴网上的思路，让浏览器强制重绘。方案是，在需要重绘的地方，在 body 元素，增加一个 css class，然后移除该 css class ，就达到这个目的。这个 css class 应该是没有任何效果的。

$('body').addClass('ietest');
$('body').removeClass('ietest');

链接：

1. CSS 相邻兄弟选择器

伪类不能重绘的问题

现象

使用伪类 ::before ，发现不起作用。

解决方案

改变伪类的 content 的内容，改成 . 空格(容易被打包工具给处理掉)之类的来解决。

content: '.';
content: ' ';

总结

打包和压缩问题

打包要保证打包行为的一致性。就是说在测试环境打出来的包和生产环境打出来的包行为要一致。碰到好几次问题就是在两个环境大包出来的不一样。这里调试碰到的问题是空格在生产环境中被压缩成空字符串了。

不要使用 IE11 下的 IE8 模式进行验证

做过 IE 下兼容性问题的人都应该知道，在 IE11 开发者工具下面有个 IE8 的兼容模式，这很方便，一般情况下也够用。但是对前面所说的第一个问题（css 的大小问题），在这种兼容模式下是没有办法重现的。因此真的兼容 IE8 的话，还是要用真实的 IE8 环境来验证一下吧，模拟环境不可靠。

控制 css 的大小

对于 css 的大小的问题以后应该做模块化处理。相关页面请加载自己的 css 和基础的 css 。其他不相关的 css 不应该放在一起。这是对打包工具的要求。采用这种方案就能很好的解决 css 大小的问题。

希望不要去兼容 IE8

最根本的解决方案是，不去兼容 IE8 了。显然这是不可能的，因为网站流量中有一部分还是用的 IE8 ，没有到忽略不计的程度，IE8 还是逃不掉的。

最后

希望我说的对你有用，谢谢。