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-width: 100%来限制其宽度最大为父容器的宽度，可是有时候却不奏效，慢慢摸索才得知IE解析max-width所遵循的规则：严格要求直接父元素的宽度是固定的。经实验发现Chrome所遵照的规则比IE松一些，因此这个问题应该不归属为IE兼容性问题，不过我仍是提一下吧。分享两个我遇到的场景：

（1）td中的max-width

若是针对td中的img元素设置max-width: 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标签设置width: 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, ''); } }