最近做的网站,需要兼容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. FreeSWITCH异常原因总结

    最经在玩FreeSWITCH的时候,遇到很多的问题,特此总结一下,希望以后不要犯类似的错误了: 1.Client端无法注册,但是FS运行正常? 解决办法:查看防火墙是否关闭./etc/init.d/i ...

  2. JS ----实现复制粘贴功能 (剪切板应用clipboardData)

    注意:ie7,与ie8 对网页有个复制的权限,需在“安全”中的“自定义级别”的脚本中设置 clipboardData 对象 提供了对剪贴板的访问. 三个方法 :1.clearData(sDataFor ...

  3. Ex 7_17 考虑如下的网络(其中数字为对应边的容量)...第十三次作业

    (a) 利用ford-fulkerson算法即可求出最大流和最小分割. (b) 剩余网络为 由S可达的顶点为A.B.可达T的顶点为C. (c) 瓶颈边有e(A,C),e(B,C). (d) 下图中不包 ...

  4. JetBrains GoLand 2018 激活码/ 注册码(最新破解方法)

    1 前言 本机测试环境如下: Goland版本:2018.1.5 电脑系统:win7 64位 JetbrainsCrack.jar:链接: https://pan.baidu.com/s/1blmN3 ...

  5. spring-data-redis和jedis版本对应问题

    项目中使用spring-data-redis总是出现跟jedis版本不一致的问题而导致异常. java.lang.ClassNotFoundException 下面就记录两者版本对应关系: sprin ...

  6. STM32L476应用开发之五:数据保存与SD卡操作

    便携式气体分析仪的特点就是离线运行.尽管是离线运行,但测试数据还是需要的,所以采取方式保存数据就是必须的.在本次项目中我们计划采用SD卡来保存数据. 1.硬件设计 该读卡器整合 SD 卡规范和 FAT ...

  7. python中的zip、map、reduce 、lambda、filter函数的使用

    飞机票 lambda函数 lambda只是一个表达式,函数体比def简单很多. lambda的主体是一个表达式,而不是一个代码块.仅仅能在lambda表达式中封装有限的逻辑进去. lambda表达式是 ...

  8. Centos 7.3下 Linux For SQL Server安装及配置介绍

    Centos 7.3下 Linux For SQL Server安装及配置介绍 高文龙关注13人评论2828人阅读2017-03-05 21:46:21 Centos 7.3下Linux For SQ ...

  9. Confluence 6 home 目录中的内容

    Confluence home 目录存储了 Confluence 在运行中所使用的数据.下面对 Confluence home 目录中使用的数据和文件进行一些说明: confluence.cfg.xm ...

  10. Confluence 6 数据库表-内容(Content)

    这部分的内容描述了有关 Confluence 存储内容所使用的表格.内容是用户在 Confluence 存储和分享的信息. attachmentdata 附件文件的二进制数据.当 Confluence ...