IE8兼容性问题

图月志

2018-01-17

由于业务的需要，我们竟然还要支持IE8，听着就让人很心酸呀。不过在进行适配的过程中，会发现还是有一定规律的，基本上帮相关问题改了，页面也就能正常显示了。下面就总结下对IE8适配过程中所进行的修改。

1. CSS不支持rbg()以及rgba()函数

建议在IE8上使用纯色而非带透明度的颜色，如果一定要使用有透明度的颜色的话，可以使用filter:alpha(opacity=xx);来模拟，但需要注意，用filter设置的透明度是对整体设置的，跟opacity一样，而非仅仅对颜色起作用。

如

background-color: rgba(102, 102, 102, 0.2);

可以改为

background-color: #666666;
background-color: rgba(102, 102, 102, 0.2);
filter: alpha(opacity=20); /*support iE8*/

2. :hover样式无效，因为在IE8只有<a>标签支持:hover样式

建议将:hover样式放在<a>上，如果一定要在<span>，<li>等标签上使用，可以利用 JavaScript 的 mouseenter、mouseleave等事件来设置样式。

3. IE8仅部分支持CSS3选择器，如element1~element2、element1+element2、[attr^=val] , [attr$=val]以及[attr*=val]，不支持:last-child、:not()等选择器，所以在选择器的使用上需要注意

4. IE8不支持background-size

有时为了使图片看起来更加清晰，部分背景会使用2倍图，然后通过设置容器的大小以及background-size等属性使图片缩放到正确的尺寸，但由于IE8不支持background-size属性，所以使用2倍图会超出容器大小，所以在IE8上要用CSS进行 hack 处理。

background-image: url(images/[email protected]);
background-image: url(images/logo.png) \9; /* ie8 hack，在ie8上使用1倍图 */
background-size: contain;

需要注意，在less中要写成background-image: url(images/logo.png) ~"\9";

5. IE8中为<a>的href属性设置mailto:xxxx时，浏览器会将<a>的显示的内容替换成href属性。

如<a href="mailto:[email protected]">咨询</a>，在IE8上会显示成<a href="mailto:[email protected]">mailto:[email protected]</a>。

这个是IE的一个BUG，正常来说，不解决也不会有什么问题，但是如果一定要精益求精的话的话，可以用JavaScript对其进行修改。