IE8的兼容问题

　　

需要使用meta标签来强制IE8使用最新的内核渲染页面，代码如下：

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

IE=edge表示强制使用IE最新内核，chrome=1表示如果安装了针对IE6/7/8等版本的浏览器插件Google Chrome Frame（可以让用户的浏览器外观依然是IE的菜单和界面，但用户在浏览网页时，实际上使用的是Chrome浏览器内核），那么就用Chrome内核来渲染。

解决方法360已经告诉我们了，通过meta标签的方式建议其使用Webkit，代码如下：

<meta name="renderer" content="webkit">

我没有做细致的调查，不知道其他的双核浏览器是否支持此特性。

Media Query

IE8似乎无法识别Media Query，所以需要hack一下啦！推荐采用Respond.js解决此问题，具体方法参见它的文档即可。

实现CSS3的某些特性

IE8不支持CSS3的很多新特性，不过我们可以使用一些比较成熟的hack方法，我采用的是CSS3 PIE，它支持的特性有这些：border-radius、box-shadow、border-image、multiple background images、linear-gradient等。

特别注意：请一定阅读CSS PIE给出的Know Issues。

识别HTML5元素

如果你在前端代码中使用了HTML5的新标签（nav/footer等），那么在IE中这些标签可能无法正常显示。我使用html5shiv，具体使用方法见文档。

关于max-width

还有一个在IE8中经常遇到的问题就是max-width，网页中图片的尺寸可能比较宽，我会给它设置max- 100%来限制其宽度最大为父容器的宽度，但是有时候却不奏效，慢慢摸索才得知IE解析max-width所遵循的规则：严格要求直接父元素的宽度是固定的。经实验发现Chrome所遵守的规则比IE松一些，所以这个问题应该不归属为IE兼容性问题，不过我还是提一下吧。分享两个我遇到的场景：

（1）td中的max-width

如果针对td中的img元素设置max- 100%，在IE和Firefox你会发现不奏效，而在Chrome中却是可以的。经查询发现需要给table设置table-layout: fixed，对此属性的具体解释见W3School。

（2）嵌套标签中的max-width

如下的HTML结构：

<div class="work-item">
    <a href="#" class="work-link">
        <img src="sample.jpg" class="work-image img-responsive">
    </a>
</div>

最外层元素.work-item设置了固定宽度，但是对img设置max-width为100%却无效，后来才发现需要再对a标签设置 100%，这样才能使最内层的img标签充满整个div。

嵌套inline-block下padding元素重叠

HTML代码：

<ul>
    <li><a>1</a></li>
    <li><a>2</a></li>
    <li><a>3</a></li>
</ul>

CSS代码：

ul li{
    display: inline-block;
}
ul li a{
    display: inline-block;
    padding: 10px 15px;
}

按理来说a标签之间的距离应该是30px，但在IE8中出现了重叠，只有15px。这里和这里也提到了同样的问题。我的解决方法是使用float: left替代display: inline-block实现水平布局。

placeholder

IE8下不支持HTML5属性placeholder，不过为解决此问题的js插件挺多的，比如：jquery-placeholder。

last-child

first-child是CSS2的内容，但是last-child就不是了，所以IE8不买账。推荐的做法不是使用last-child，而是给最后一个元素设置一个.last的class，然后对此进行样式设置，这样就全部兼容了。

background-size: cover

如果你想使用background-size: cover设置全屏背景，很遗憾IE8办不到...但可以使用IE独有的AlphaImageLoader滤镜来实现，添加一条如下的CSS样式：

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=Enabled, sizingMethod=Size , src=URL)

将sizingMethod设置为scale就OK了。

还没完，如果你在此背景之上放置了链接，那这个链接是无法点击的。一般情况下的解决办法是为链接或按钮添加position:relative使其相对浮动。

filter blur

CSS3中提供支持滤镜效果的属性filter，比如支持高斯模糊效果的blur（类似iOS7的效果）：

filter: blur(10px);
-webkit-filter: blur(10px);
-moz-filter: blur(10px);

IE8对filter: blur(10px)的显示效果是对HTML元素进行小范围的模糊处理，这个效果并不是高斯模糊，要想支持高斯模糊，需要如下设置：

filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='10');

在实践中发现一个坑就是，所有position: relative的元素都不会生效。

其他的发现是，IE9对filter: blur(10px)无效，而对filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='10');是针对元素小范围的模糊效果。

. 动态脚本

 在ie8中，动态修改script的src属性会报错，解决办法：调用jquery的getScript()方法，如下：

$.getScript(yourScriptUrl)

CSS文件大小限制

 项目发布到线上时，通常会对css文件进行打包压缩，以节省空间。通常过程中，项目开发过程中会引入一些样式库文件。库文件一起打包，生成的合并文件就会变大。在chrome、FF、IE9以上没有问题，但是在ie8中，样式不显示。调试过程中，开始觉得很诡异，突然一个想法怀疑是ie8对css文件大小有限制，经过查资料，得到如下结论：

• Up to 31 CSS files or tags per page. 单个页面最多31个css文件
• Up to 288K per CSS file (uncompressed). 每个css文件大小最大288k
• Up to 4095 selectors per CSS file. 每个css文件最多4095个选择器

    确实是ie8对css文件的字节数有限制。解决办法：css、less等库文件打包时，可以打包成2至3个文件。

window.location.orign

    ie8不支持window.location.orign方法，取值为undefined。解决方法：通过协议、主机、端口拼，重写改属性

        if (!window.location.origin) {
            window.location.origin = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port : '');
        }
        window.location.href = window.location.origin;

 ajax请求缓存

     在ie8浏览器中，对于同一接口多次请求，会从浏览器的缓存中获取，解决方法：添加时间戳

 url: 'yourAjaxUrl?time=' + new Date().getTime()

 console问题

     
一般这个问题的现象是：当你开发控制台时不报错，关闭控制台运行代码时报错。window.console()在ie8中必须打开控制台才能实现，关闭控制台时会报错，在ie9才开始修复该问题。解决这个兼容性问题，有两种方案： 
- 去除页面中的console.log()方法 （我是用这种方法处理的，页面中残留的console.log()不多） 
- 重写window.console()方法；

        (function () {
            var funcs = ['assert', 'clear', 'count', 'debug', 'dir', 'dirxml',
                'error', 'exception', 'group', 'groupCollapsed', 'groupEnd',
                'info', 'log', 'markTimeline', 'profile', 'profileEnd',
                'table', 'time', 'timeEnd', 'timeStamp', 'trace', 'warn'];
            for(var i=0,l=funcs.length;i<l;i++) {
                var func = funcs[i];
                if(!console[func])
                    console[func] = function(){};
            }
        })()

Array.forEach()兼容

     
forEach在ie8中不兼容，重写该方法：

 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++;
            }
        };
    }

 oninput与onpropertychange

     
有时候需要兼容input输入框的值动态的变化，当然onKeyup也是一种方法，但是对于用鼠标复制等无法监听，onchange需要值有变化时才出发。所以oninput方法比较合适，但是在ie8以下未被兼容，可以通过onpropertychange处理，代码如下：

        Ev.on(ele,"input propertychange",function(e){
           // do something 
        });

String.trim()兼容

     
ie8下不兼容String.trim()方法，判断String作用域链上是否存在trim方法，如不存在，就自定义改方法

        // string  trim 方法兼容
        if (!String.prototype.trim) {
            String.prototype.trim = function trim() {
                return this.replace(/^s+|s+$/g, '');
            }
        }