ie8兼容性解决

最新推荐文章于 2020-12-20 10:10:53 发布

niuyueyang

最新推荐文章于 2020-12-20 10:10:53 发布

阅读量155

点赞数

分类专栏： js 文章标签： ie8

本文链接：https://blog.csdn.net/qq_33332184/article/details/99933374

版权

js 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

css3媒体查询
在ie8的css位置引入respond.js
ie8不支持html5新标签
html5shiv.js，在页面中引用html5shiv.js文件。必须添加在页面的元素内，因为IE浏览器必须在元素解析前知道这个元素，所以这个js文件不能在页面底部引用。
rem不兼容
在页面中引用rem.js文件。需要引用在页脚，也就是末尾，在所有css文件引用和DOM元素之后
background-size不兼容
引用“background-size polyfill”库来兼容，“background-size polyfill”的代码文件需要在css中引用。在所有用到这两个“background-size”属性值的地方，加一行“-ms-behavior”属性
.selector {
background-size: cover;
/* 以下相对路径是相对于文档，而非css文件！ /
/ 使用绝对路径可以避免混淆 */
-ms-behavior: url(/backgroundsize.min.htc);
}
placeholder不兼容
引入jquery.placeholder.js

last-child不支持
在最后一个元素单独加一个class属性，这样就兼容了
ie8不支持forEach

Array.prototype.myForEach = function myForEach(callback,context){  
    context = context || window;  
    if('forEach' in Array.prototye) {  
        this.forEach(callback,context);  
        return;  
    }  
    //IE6-8下自己编写回调函数执行的逻辑  
    for(var i = 0,len = this.length; i < len;i++) {  
        callback && callback.call(context,this[i],i,this);  
    }  
}

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>

        <link rel="stylesheet" href="remDemo.css">
        <!--以下的css文件在IE8浏览器中会被rem.js忽略-->
        <!--其他浏览器中依旧会显示，因为其他浏览器支持rem！-->
        <link rel="stylesheet" type="text/css" href="test.css" data-norem />

        <script src="js/html5shiv.min.js"></script>
        <script src="js/respond.min.js"></script>
        <!--        <script src="js/jquery-1.8.3.min.js"></script>-->
    </head>

    <body>
        <div class="box">
            <p class="title">欢迎来到主界面
                <p class="content">这里是叮叮咚咚</p>
            </p>
            <ul>
                <li>
                    <label>姓名</label>
                    <input type="text" class="name" />
                </li>
                <li>
                    <label>姓名</label>
                    <input type="text" class="password" />
                </li>
            </ul>
        </div>

        <script src="js/rem.min.js" type="text/javascript"></script>
    </body>

</html>

@media screen and (max-width: 1600px) {
    html {
        color: brown;
        font-size: 200%;
    }
}

@media screen and (min-width: 1601px) {
    html {
        color: blueviolet;
        font-size: 400%;
    }
}
.box {
    margin: 2rem;
}
.title {
    margin: 2rem;
    font-size: 4rem;
}

.content {
    //margin-top: 8rem;
    font-size: 2rem;
}
input {
    margin-top: 1rem;
}