• 常见IE8兼容性问题及解决


    1、css3媒体查询

    IE8不支持媒体查询

    解决:respond.js,在页面中所有css文件的引用位置之后引用Respond.js

    2、HTML5新标签

    IE8不支持H5新标签

    解决:html5shiv.js,在页面中引用html5shiv.js文件。必须添加在页面的<head>元素内,因为IE浏览器必须在元素解析前知道这个元素,所以这个js文件不能在页面底部引用。

    3、rem不兼容

    rem是相对于根元素<html>的字体大小比率单位,成了目前主流的单位之一。IE9+开始支持,IE8就只能通过引入js库来支持了

    解决:在页面中引用rem.js文件。需要引用在页脚,也就是<body>末尾,在所有css文件引用和DOM元素之后

    4、css3的background-size的cover和contain

    backgroun-size的cover和contain是css3新引入的属性,IE8不支持

    解决:引用“background-size polyfill”库来兼容,“background-size polyfill”的代码文件需要在css中引用。在所有用到这两个“background-size”属性值的地方,加一行“-ms-behavior”属性

    .selector { 
        background-size: cover;
        /* 以下相对路径是相对于文档,而非css文件! */
        /* 使用绝对路径可以避免混淆 */
        -ms-behavior: url(/backgroundsize.min.htc);
    }

    5、placeholder

    placeholder是h5的属性,ie8不支持

    解决:jquery-placeholder

    6、last-child

    last-child是css3选择器,ie8不支持

    解决:不使用last-child,而是给最后一个元素设置一个.last的class,然后对此进行样式设置,这样就全部兼容了

    7、数组的forEach方法

    ie8的数组对象不支持forEach方法

    解决:自己实现forEach方法

    if ( !Array.prototype.forEach ) {
        Array.prototype.forEach = function forEach( callback, thisArg ) {
            var T, k;
            if ( this == null ) {
                throw new TypeError( "this is null or not defined" );
            }
            var O = Object(this);
            var len = O.length >>> 0;
            if ( typeof callback !== "function" ) {
                throw new TypeError( callback + " is not a function" );
            }
            if ( arguments.length > 1 ) {
                T = thisArg;
            }
            k = 0;
            while( k < len ) {
                var kValue;
                if ( k in O ) {
                    kValue = O[ k ];
                    callback.call( T, kValue, k, O );
                }
                k++;
            }
        };
    }
  • 相关阅读:
    cf B. Sonya and Exhibition
    cf B. Sonya and Exhibition
    1000C
    1000C
    AOE网打印所有的关键路径
    AOE网打印所有的关键路径
    拓扑排序判断有向图是否成环
    拓扑排序判断有向图是否成环
    迭代器
    Dictionary Aizu
  • 原文地址:https://www.cnblogs.com/zjp-/p/9923781.html
Copyright © 2020-2023  润新知