• 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对其进行修改。

  • 相关阅读:
    mysql下载与安装
    Observable Flowable Test
    Linux 技巧:让进程在后台可靠运行的几种方法
    CallBack
    Linux内存分析
    Linux安装svn
    百度地图api
    安装Mysql官方的sakila数据库
    yii2 展示静态页面
    yii2 手动安装第三方扩展
  • 原文地址:https://www.cnblogs.com/philipding/p/8305198.html
Copyright © 2020-2023  润新知