IE8兼容问题
最近做的网站,需要兼容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兼容问题的更多相关文章
- ie8兼容
最近在做ie8兼容,把遇到的问题整理了一下 1. margin:0 auto; 无法居中 解决方法:1.换成h4的文档类型 <!DOCTYPE html PUBLIC "-//W3C/ ...
- 360兼容模式==ie8 兼容模式下 span标签占位问题
ie8 兼容模式 ie8 标准渲染 应付金额 穿位 错误代码 <span class="span_em">应付金额:<em><span style=& ...
- IE8兼容placeholder的方案
用JavaScript解决Placeholder的IE8兼容问题 placeholder属性是HTML5新添加的属性,当input或者textarea设置了该属性后,该值的内容将作为灰色提示显示在文本 ...
- ie8兼容圆角
ie8兼容圆角 PIE.HTC下载地址:http://css3pie.com/ 兼容ie8 代码如下: <!DOCTYPE html> <html> <head> ...
- 使用X-UA-Compatible来设置IE8兼容模式
使用X-UA-Compatible来设置IE8兼容模式 本文向大家描述一下如何使用X-UA-Compatible来设置IE8兼容模式,X-UA-Compatible是针对IE8兼容模式,X-UA-Co ...
- prototype.js的Ajax对IE8兼容问题解决方案
你是否遇到过这样的问题?在使用protype.js的Ajax应用时,会出现这样的问题:只要调用了Ajax.Request,然后点该页面右键,查看“属性”就弹出“IE停止工作”的对话框,然后强制重新加载 ...
- javascript ie8兼容 a标签href javascript:void(0);
ie8兼容 a标签href javascript:void(0); 尽量不要用javascript:协议做为A的href属性,这样不仅会导致不必要的触发window.onbeforeunload事件;
- react 开发 PC 端项目(一)项目环境搭建 及 处理 IE8 兼容问题
步骤一:项目环境搭建 首先,你不应该使用 React v15 或更高版本.使用仍然支持 IE8 的 React v0.14 即可. 技术选型: 1.react@0.14 2.bootstrap3 3. ...
- H5C3--语义标签以及语义标签IE8兼容,表单元素新属性,度量器,自定义属性,dataList,网络监听,文件读取
HTML5新增标签以及HTML5新增的api 1.H5并不是新的语言,而是html语言的第五次重大修改--版本 2.支持:所有的主流浏览器都支持h5.(chrome,firefox,s ...
- IE8兼容模式设置
设置---兼容性视图设置--添加此网站--在IE8中调试(防止调整IE内核后浏览器崩溃,360可通过设置极速模式-兼容模式 点击地址栏绿色图标)
随机推荐
- FreeSWITCH异常原因总结
最经在玩FreeSWITCH的时候,遇到很多的问题,特此总结一下,希望以后不要犯类似的错误了: 1.Client端无法注册,但是FS运行正常? 解决办法:查看防火墙是否关闭./etc/init.d/i ...
- JS ----实现复制粘贴功能 (剪切板应用clipboardData)
注意:ie7,与ie8 对网页有个复制的权限,需在“安全”中的“自定义级别”的脚本中设置 clipboardData 对象 提供了对剪贴板的访问. 三个方法 :1.clearData(sDataFor ...
- Ex 7_17 考虑如下的网络(其中数字为对应边的容量)...第十三次作业
(a) 利用ford-fulkerson算法即可求出最大流和最小分割. (b) 剩余网络为 由S可达的顶点为A.B.可达T的顶点为C. (c) 瓶颈边有e(A,C),e(B,C). (d) 下图中不包 ...
- JetBrains GoLand 2018 激活码/ 注册码(最新破解方法)
1 前言 本机测试环境如下: Goland版本:2018.1.5 电脑系统:win7 64位 JetbrainsCrack.jar:链接: https://pan.baidu.com/s/1blmN3 ...
- spring-data-redis和jedis版本对应问题
项目中使用spring-data-redis总是出现跟jedis版本不一致的问题而导致异常. java.lang.ClassNotFoundException 下面就记录两者版本对应关系: sprin ...
- STM32L476应用开发之五:数据保存与SD卡操作
便携式气体分析仪的特点就是离线运行.尽管是离线运行,但测试数据还是需要的,所以采取方式保存数据就是必须的.在本次项目中我们计划采用SD卡来保存数据. 1.硬件设计 该读卡器整合 SD 卡规范和 FAT ...
- python中的zip、map、reduce 、lambda、filter函数的使用
飞机票 lambda函数 lambda只是一个表达式,函数体比def简单很多. lambda的主体是一个表达式,而不是一个代码块.仅仅能在lambda表达式中封装有限的逻辑进去. lambda表达式是 ...
- 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 ...
- Confluence 6 home 目录中的内容
Confluence home 目录存储了 Confluence 在运行中所使用的数据.下面对 Confluence home 目录中使用的数据和文件进行一些说明: confluence.cfg.xm ...
- Confluence 6 数据库表-内容(Content)
这部分的内容描述了有关 Confluence 存储内容所使用的表格.内容是用户在 Confluence 存储和分享的信息. attachmentdata 附件文件的二进制数据.当 Confluence ...