最近做的网站,需要兼容IE8,在这里记录一下,碰到的问题,方便以后查看补充

1.CSS选择器nth-child 不兼容

ul li:nth-child(2){
background-image: url(../img/2.jpg);
background-size: cover;
}

IE8不兼容 这种写法 在网上百度了一下 兼容写法  戳这里

可以使用jQuery :nth-child() 来替代CSS3 的:nth-child(2n)这种类型的css写法

:nth-child(odd)用于匹配奇数子元素

:nth-child(even)用于匹配偶数子元素

:nth-child(n)用于匹配第n个元素

:nth-child(an)用于匹配倍数为a的元素,如3n、5n…
是一个公式,如:nth-child(3n+1)匹配第1、第4、第7…个元素 :nth-child(-n+3)匹配前3个元素 :nth-child(-3n+8)匹配第8、第5、第2个元素

  

由于我的是少数静态轮播图的样式,所以采用了 添加类名的这种比较low的方式来解决

2.CSS属性 cover 背景自适应铺满容器的这个属性 在IE8中不起作用

background-size: cover;  IE8以上版本可支持

 兼容写法:

.Scroll1 .full li{
width: 100% !important;
background: url(../img/1.jpg) top center no-repeat;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='http://static.yuntongauto.com/bjzy/img/1.jpg', //背景图绝对地址
sizingMethod='scale'); //scale 就是cover的全铺
}

  这里说明一下 当设置好fliter的时候 会将样式重写在标签的内联样式表 如图:

所以注意一下修改样式的问题

3. IE8下 a标签中图片出现border 和默认蓝色 color

<a href="#"><img src="1.jpg"></a>

  a标签里的img会出现蓝色border  而且a标签内默认字体颜色会变成蓝色

这里会需要 img{border:none;

4.video 标签不支持

 <video width="100%" height="515px" controls preload>
<source src="1.mp4" type="video/mp4" codecs="avc1.42E01E,mp4a.40.2">
<!–[if lt IE 8]>
<embed src="1.mp4" width="100%" height="515px" autostart=false/>
<![endif]–>
</video>

  这里是我自己研究出来的解决办法  注意 embed标签在移动端无法显示视频

参考了网上关于video的兼容解决 还有很多解决办法 总结最好的 是这个 http://www.cnblogs.com/mengfangui/p/7122130.html

5.border-radius,box-shadow CSS3样式不兼容问题

样式中添加

    -moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari Chrome */
border-radius: 15px; /* Opera 10.5+, Internet Explorer 6+ IE-CSS3 */
-moz-box-shadow: 10px 10px 12px #000; /* Firefox */
-webkit-box-shadow: 10px 10px 12px #000; /* Safari 和 Chrome */
box-shadow: 3px 3px 10px #000; /* Opera 10.5+, IE6+ IE-CSS3 */
behavior: url(../htc/ie-css3.htc); /* 对IE-CSS3的引用 */

用htc会出现一个问题 就是背景覆盖问题,若元素本身没有设置背景色 会出现黑色的背景覆盖

background: #f5f5f5;  //pink 英文的颜色不与识别  所以transparent也不能识别

  此时要实现透明背景可以直接使用  opacity: 0; 因为加了htc 所以可以被识别 注意的是 要区分 只在IE8的浏览器中进行渲染改样式 因为I9以上的浏览器 子元素会继承透明

 <!--[if IE 8]>
<style>
.div{
opacity: 0;
}
</style>
<![endif]-->

这样在IE8及其他浏览器 显示就一样了 效果图

6.不兼容渐变

这个问题 张鑫旭大神有详细的介绍 戳这里

7.关于JS判断处于哪一种IE状态下:

var browser=navigator.appName
var b_version=navigator.appVersion
var version=b_version.split(";");
var trim_Version=version[1].replace(/[ ]/g,"");
if(browser=="Microsoft Internet Explorer" && trim_Version=="MSIE8.0")
{
alert("IE 8.0");
动态的改变类名,JS方法效果
}

8.opacity不兼容问题

   <!--[if IE 8]>
<style>
.hidebox{
filter:alpha(opacity=85);
background: #fff;
}
</style>
<![endif]-->

  这个加上以后,IE8下支持了透明,由于opacity的继承性,父级下所有元素均为85的透明度

主流浏览器 :         IE8:

9.对于header,footer 等H5新标签不支持 引入插件解决方法

<script src="http://haiqiancun.com/file/demo/custom.modernizr.js"></script>  

10.Object.keys(data) ie8,ie7不兼容 就是将OBJ转化为数组的方法  18.06.06

Object.keys 返回一个所有元素为字符串的数组,其元素来自于从给定的object上面可直接枚举的属性。)

错误类型:

此时发现 ie8不支持该方法

兼容措施:

if (!Object.keys) {
Object.keys = (function () {
var hasOwnProperty = Object.prototype.hasOwnProperty,
hasDontEnumBug = !({toString: null}).propertyIsEnumerable('toString'),
dontEnums = [
'toString',
'toLocaleString',
'valueOf',
'hasOwnProperty',
'isPrototypeOf',
'propertyIsEnumerable',
'constructor'
],
dontEnumsLength = dontEnums.length; return function (obj) {
if (typeof obj !== 'object' && typeof obj !== 'function' || obj === null) throw new TypeError('Object.keys called on non-object'); var result = []; for (var prop in obj) {
if (hasOwnProperty.call(obj, prop)) result.push(prop);
} if (hasDontEnumBug) {
for (var i=0; i < dontEnumsLength; i++) {
if (hasOwnProperty.call(obj, dontEnums[i])) result.push(dontEnums[i]);
}
}
return result;
}
})()
}

这样obj又可以被解析了

11.vue 不兼容ie8及以下

这里有个博客 详细记录了 vue不兼容ie8的原因 vue的核心 Object.defineProperty详解 戳这里

这是目前遇到的关于IE8的兼容 以后遇到在进行汇总

IE8兼容问题的更多相关文章

  1. ie8兼容

    最近在做ie8兼容,把遇到的问题整理了一下 1. margin:0 auto; 无法居中 解决方法:1.换成h4的文档类型 <!DOCTYPE html PUBLIC "-//W3C/ ...

  2. 360兼容模式==ie8 兼容模式下 span标签占位问题

    ie8 兼容模式 ie8 标准渲染 应付金额 穿位 错误代码 <span class="span_em">应付金额:<em><span style=& ...

  3. IE8兼容placeholder的方案

    用JavaScript解决Placeholder的IE8兼容问题 placeholder属性是HTML5新添加的属性,当input或者textarea设置了该属性后,该值的内容将作为灰色提示显示在文本 ...

  4. ie8兼容圆角

    ie8兼容圆角 PIE.HTC下载地址:http://css3pie.com/ 兼容ie8 代码如下: <!DOCTYPE html> <html> <head> ...

  5. 使用X-UA-Compatible来设置IE8兼容模式

    使用X-UA-Compatible来设置IE8兼容模式 本文向大家描述一下如何使用X-UA-Compatible来设置IE8兼容模式,X-UA-Compatible是针对IE8兼容模式,X-UA-Co ...

  6. prototype.js的Ajax对IE8兼容问题解决方案

    你是否遇到过这样的问题?在使用protype.js的Ajax应用时,会出现这样的问题:只要调用了Ajax.Request,然后点该页面右键,查看“属性”就弹出“IE停止工作”的对话框,然后强制重新加载 ...

  7. javascript ie8兼容 a标签href javascript:void(0);

    ie8兼容 a标签href javascript:void(0); 尽量不要用javascript:协议做为A的href属性,这样不仅会导致不必要的触发window.onbeforeunload事件;

  8. react 开发 PC 端项目(一)项目环境搭建 及 处理 IE8 兼容问题

    步骤一:项目环境搭建 首先,你不应该使用 React v15 或更高版本.使用仍然支持 IE8 的 React v0.14 即可. 技术选型: 1.react@0.14 2.bootstrap3 3. ...

  9. H5C3--语义标签以及语义标签IE8兼容,表单元素新属性,度量器,自定义属性,dataList,网络监听,文件读取

    HTML5新增标签以及HTML5新增的api     1.H5并不是新的语言,而是html语言的第五次重大修改--版本     2.支持:所有的主流浏览器都支持h5.(chrome,firefox,s ...

  10. IE8兼容模式设置

    设置---兼容性视图设置--添加此网站--在IE8中调试(防止调整IE内核后浏览器崩溃,360可通过设置极速模式-兼容模式  点击地址栏绿色图标)

随机推荐

  1. 【算法】二分查找法&大O表示法

    二分查找 基本概念 二分查找是一种算法,其输入是一个有序的元素列表.如果要查找的元素包含在列表中,二分查找返回其位置:否则返回null. 使用二分查找时,每次都排除一半的数字 对于包含n个元素的列表, ...

  2. [C]va_list可变长参数的使用

    一.概述 运用标准C的头文件stdarg.h提供的宏可以实现函数的自定义传参个数: 二.语法 1.va_list是一个可变长参数类型,在使用可变长参数的函数中可以定义1个或多个va_list类型参数, ...

  3. js---json对象拆分

    var a={ "bb":"world", "a0":1, "a1":2, "b0":4, &quo ...

  4. js学习——函数

    函数声明 function funName(parameter){} 函数表达式,并把函数存储在变量x中 //不用给函数名,后续并不能直接用给定的函数名调用 var x = function(a){r ...

  5. mvn tomcat7:help的14个命令

    D:\2018\code\XXX>mvn tomcat7:help [INFO] Scanning for projects... [INFO] [INFO] ----------------- ...

  6. 《Oracle DBA工作笔记:运维、数据迁移与性能调优》 PDF 下载

    一:下载途径 二:本书图样 三:本书目录 第1篇 数据库运维篇第1章 数据库安装配置1.1 安装前的准备 11.2 安装数据库软件 51.2.1 方法1:OUI安装 61.2.2 方法2:静默安装 8 ...

  7. 关于ios进入后台界面后 播放声音解决方案

    1 最近我在做环信视频通话时,遇到了一个新功能就是APP在后台的时候能对方能视频或者音频过来的时候 能够播放声音 根据查询相关资料得到如下解决办法 NSError *error; AVAudioSes ...

  8. nginx官方模块之http_sub_status_module

    作用 显示nginx的连接状态,nginx客户端状态 配置语法 配置

  9. python的IDE工具-- Pycharm

    我们可以在python的交互环境下编写执行代码,但这只是适合短的代码,当有长的代码时在这里编写就不方便, Python有自带的IDE,根据自己使用的情况来看,感觉Pycharm这款IDE比自带的IDE ...

  10. Linux 用户切换、修改用户名、修改密码

    一.用户切换 "$":普通用户提示符 "#":root用户提示符 1.普通用户到root: 方式一:命令:su然后输入root密码 此种方式只是切换了root身 ...