IE8兼容性问题

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

 

1. CSS不支持 rgb() 以及 rbga() 函数

建议在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/logo@2x.png);
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:service@163.com">咨询</a> ，在IE8上会显示成 <a href="mailto:service@163.com">mailto:service@163.com</a> 。

这个是IE的一个BUG，正常来讲，不解决也不会有什么问题，可是若是必定要精益求精的话的话，能够用JavaScript对其进行修改。