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

        }

    };

}

常见IE8兼容性问题及解决的更多相关文章

  1. IE6 7下常见CSS兼容性处理

    以下是一些比较常见的IE6 7下的兼容性问题. 在当下这个时代,其实我们几乎可以不用再去针对IE6做兼容性的处理,除非你的公司还是诡异的要求你兼容到IE6.但是了解一些常见的兼容性问题还是可以帮助我们 ...

  2. CSS- ie6,ie7,ie8 兼容性写法,CSS hack写法

    css ie6,ie7,ie8 兼容性写法,CSS hack写法 margin-bottom:40px;       /*ff的属性*/margin-bottom:140px\9;    /* IE6 ...

  3. ie6,ie7,ie8 css bug兼容解决记录

    ie6,ie7,ie8 css bug兼容解决记录 转载自:ie6,ie7,ie8 css bug兼容解决记录 - 前端开发 断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面 ...

  4. ie6对hover兼容性问题的解决：

    ie6对hover兼容性问题的解决: 1,在body里添加以下样式: behavior:url(../scripts/csshover.htc); csshover.htc可直接在网上下载 2,js解 ...

  5. 分享.net常见的内存泄露及解决方法

    分享.net常见的内存泄露及解决方法 关于内存泄漏的问题,之前也为大家介绍过,比如:<C++中内存泄漏的检测方法介绍>,是关于C++内存泄漏的.今天为大家介绍的是关于.NET内存泄漏的问题 ...

  6. bootstrap IE8 兼容性处理

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  7. Aasible中cryptography兼容性报错解决办法

    Aasible中cryptography兼容性报错解决办法 1 Ansible中使用ansible --version查看版本,报错信息如下: ERROR! Unexpected Exception, ...

  8. Nginx常见错误与问题之解决方法技术指南

      Nginx常见错误与问题之解决方法技术指南. 安装环境: 系统环境:redhat enterprise 6.5 64bit 1.Nginx 常见启动错误 有的时候初次安装nginx的时候会报这样的 ...

  9. IE浏览器和Firefox浏览器兼容性问题及解决办法

    IE浏览器和Firefox浏览器兼容性问题及解决办法 为了方便大家阅读代码,以下以 IE 代替 Internet Explorer,以 MF/FF 代替 Mozzila Firefox : 1.//w ...

随机推荐

  1. Android学习——自定义控件（二）

    这篇文章来介绍自定义组合控件,自定义组合控件的应用场景很多,比如当你的UI如下时: 倘若不使用组合控件,则需要在XML文件中声明4个TextView和4个EditText,而使用了组合控件,则只需要四 ...

  2. html select 操作备份

    select动态添加option问题 JS操作:(未验证) 代码 var selid = document.getElementById("sltid"); for(var i=0 ...

  3. 关于“为什么不加friend就会提示参数过多”

    #include <iostream> using namespace std; class Complex { double real, imag; public: Complex(do ...

  4. SQL计算上下两行某列的差

    SELECT * FROM #TempHuDong SELECT * FROM #TempHuDong SELECT TOP 1 ABS(a.num -b.num) '差' FROM (select ...

  5. gogs配置及迁移

    工作需要迁移gogs,粗略记下笔记 操作系统:CentOS Linux release 7.4.1708 (Core) 防火墙:关闭状态,如有需要开启默认的3000端口 一.配置 首先安装git [r ...

  6. gmock使用、原理及源码分析

    1      初识gmock 1.1      什么是Mock 便捷的模拟对象的方法. 1.2      Google Mock概述 google mock是用来配合google test对C++项目 ...

  7. Linux-python的一些小问题

    1.python版本和pip版本 2.PATH和PYTONPATH 1.python版本和pip版本 1.python版本 一般Ubuntu里面都装的不止一个版本的python,比如有python2. ...

  8. Webpack笔记（一）——从这里入门Webpack

    准备了挺久,一直想要好好深入了解一下Webpack,之前一直嫌弃Webpack麻烦,偏向于Parcel这种零配置的模块打包工具一些,但是实际上还是Webpack比较靠谱,并且Webpack功能更加强大 ...

  9. bzoj4600 [Sdoi2016]硬币游戏

    Description Alice和Bob现在在玩的游戏,主角是依次编号为1到n的n枚硬币.每一枚硬币都有两面,我们分别称之为正面和反面.一开始的时候,有些硬币是正面向上的,有些是反面朝上的.Alic ...

  10. Python机器学习神器：sklearn&numpy

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDE0MDMzOA==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...