IE8的相关兼容

2024年4月5日 252次阅读 来源: Shyla

最近接触PC端，网站出来之后项目经理B君才说要做IE8的兼容（一脸懵逼）
最痛苦的是dom不能随意修改，因为css复用的地方太多了，很可能会牵一发动全身，所以只能在css和js上面动手。

CSS3选择器、HTML5、BootStrap响应式对应链接

<script src="https://cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>

关键：

  1. 本地模式(ftp)下无法起作用，可以用node搭建个本地服务器浏览

border-radius or box-shadow

.compatible{
    border-radius:5px;
    box-shadow:5px 5px 5px #000;
    behavior:url(/resource/js/pie/PIE.htc);
    position:relative;
    z-index:5;
}

关键：

  1. 下载pie.htc

  2. behavior的url地址为相对于地址栏的绝对地址，而不是所在css文件的相对地址

  3. 若是box-shadow，色值需使用编码(如下，grey is not working)

  4. box-shadow不支持insert

  5. github上说要有position:relative，不过我发现不写或者position:absolute也是可以的

box-shadow:5px 5px 5px grey;

opacity

.compatible{
    filter:alpha(opacity=50);
}

关键：

  1. 数字为百分比

background-size

.compatible{
    background-size:cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/resource/images/icon.png', sizingMethod='scale')
}

关键：

  1. 无需再加background-image

  2. src里面同样是绝对地址

transform

.compatible{
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=1.2246467991473532e-16, M21=-1.2246467991473532e-16, M22=-1, SizingMethod='auto expand')";
    filter: progid:DXImageTransform.Microsoft.Matrix(
            M11=-1,
            M12=1.2246467991473532e-16,
            M21=-1.2246467991473532e-16,
            M22=-1,
            SizingMethod='auto expand');
}

关键：

  1. 只要你会copy代码：ie兼容transform

  2. 不支持matrix3d，如translateZ,rotateX

5.22更新

找到一个很全面的关于兼容解决方案的地址：HTML5 Cross Browser Polyfills

    原文作者：Shyla
    原文地址: https://segmentfault.com/a/1190000009351350
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞