ie8和html5的兼容性,ie8网页兼容性不完全指南
最近完成了一个项目,前端使用的是bootstrap3.3.7, jquery版本是1.11.1, 须改成兼容ie8,遇到的问题多多,觉得有必要总结一下。
声明:这不是一篇能解决所有ie8兼容问题的文章,只是我在某项目过程中的经验总结。如果不能解决你遇到的问题,我表示很遗憾。
一、IE8页面调试
ie8页面的调试有几种方法:
1 使用专门调试ie的工具
目前我所查到的调试工具有ietester, 实质是在一个软件中模拟各种ie浏览器的环境,但在win10中安装,网页并不能正常打开,所以后来就放弃了。
2 找一台安装了ie8的电脑
如果你有一台电脑专门测试低版本环境的兼容性,也可以用它来测试,但通常做开发会用配置更高的电脑,所以开发环境和 测试环境被迫分离,会造成不便。
3 安装虚拟机
这是值得推荐的方法。可以在虚拟机安装一个win7, win7安装后默认浏览器版本是ie8,如果不是纯净版的win7,有可能是ie9或更高版本,你需要先把高版本的卸载掉。虚拟机安装时网卡要选择桥接模式,这样虚拟机和外部操作系统的ip会处在同一个网段,可以在外部开发,并在虚拟机内的ie8中输入网址查看。虚拟机真是伟大的发明。
按f12可以弹出开发者工具,但ie8的开发者工具很难用,只能看到报错信息的行数,而且有时指向不明确,也不能在控制台写js,不能直接更改css查看效果。这个时候我只能在外部操作系统开一个其他浏览器,在开发者工具中把疑似ie8不兼容的css给禁用,再写些支持的css, 刷新完之后再在虚拟机中查看效果。而关于js 的兼容,遇到不明确的问题是,我只能靠百度与猜测结合。
二、页面的兼容性及相关js库
页面兼容性包括html5兼容, css兼容, js兼容
。。。此处省略一万字
这些是前人总结兼容性问题做出的工具,但不一定适用于你遇到的问题,还是需要对一些ie兼容问题进行了解:
三、IE hack
加上ie hack之后,在标签内的内容,只有在符合条件时才被渲染出来。可以指定ie版本,大于某版本或小于某版本。
gt 大于
gte 大于等于
lt 小于
lte 小于等于
!不等于
如:
只在IE下生效
只在IE6下生效
只在IE6以上版本生效
只在IE8上不生效
非IE浏览器生效
使用js判断ie版本
除了使用ie hack外,你可能还需要在js运行时判断浏览器版本,你可使用如下方法实现:
(function() {
var utils = {};
utils.browserCheck = function(callback) {
var DEFAULT_VERSION = '8.0';
var ua = navigator.userAgent.toLowerCase();
var isIE = ua.indexOf('msie') > -1;
var safariVersion;
if (isIE) {
safariVersion = ua.match(/msie ([\d.]+)/)[1];
if (safariVersion <= DEFAULT_VERSION) {
callback(true);
} else {
callback(false);
}
}
};
window.ie8fix = utils;
})();
ie8fix.browserCheck(function(isIElt8) {
if (isIElt8) {
document.defaultView = window;
}
});
四、css hack
某些css属性的写法在特定ie版本浏览器才支持,而不支持的浏览器则忽略掉,通过他们可以支持不同版本的浏览器
IE浏览器各版本 CSS hack 对照表
hack
写法
IE6(S)
IE6(Q)
IE7(S)
IE7(Q)
IE8(S)
IE8(Q)
IE9(S)
IE9(Q)
IE10(S)
IE10(Q)
*
*color
Y
Y
Y
Y
N
Y
N
Y
N
Y
+
+color
Y
Y
Y
Y
N
Y
N
Y
N
Y
-
-color
Y
Y
N
N
N
N
N
N
N
N
_
_color
Y
Y
N
Y
N
Y
N
Y
N
N
#
#color
Y
Y
Y
Y
N
Y
N
Y
N
Y
\0
color:red\0
N
N
N
N
Y
N
Y
N
Y
N
\9\0
color:red\9\0
N
N
N
N
N
N
Y
N
Y
N
!important
color:blue !important;color:green;
N
N
Y
N
Y
N
Y
N
Y
Y
说明:在标准模式中
“-″减号是IE6专有的hack
“\9″ IE6/IE7/IE8/IE9/IE10都生效
“\0″ IE8/IE9/IE10都生效,是IE8/9/10的hack
“\9\0″ 只对IE9/IE10生效,是IE9/10的hack
更多css hack看文章
另外,还需了解ie8对哪些css属性支持,哪些不支持,最直接的方式是查询标准文档。
例如在目前做的项目中,经常遇到的问题是:
ie8不支持background-image 为linear-gradient线性渐变色, 须改用图片;
ie8也不支持flex布局,须改成其它布局;
ie8对before伪类不支持,引入兼容库js后,定位仍会出现问题,须修改边距值;
。。。
五、js兼容
ie8 的宿主环境所支持的方法会有所不同,例如:
ie8 的数组没有map方法,需要自己加上
if (typeof Array.prototype.map != "function") {
Array.prototype.map = function (fn, context) {
var arr = [];
if (typeof fn === "function") {
for (var k = 0, length = this.length; k < length; k++) {
arr.push(fn.call(context, this[k], k, this));
}
}
return arr;
};
}
ieBetter本质上是将不支持的方法给对象加上. 但我在项目中发现与echart.js 一起使用时出现了问题。
由于ie8使用的是attachEvent,而非addEventListener,引入ieBetter时,会增加一个addEventListener方法,而echart.js本身又存在兼容ie8的逻辑,检测到浏览器已经有addEventListener方法,就会用ieBetterjs提供的,但echart使用这个方法时却会报错,所以在使用echart.js时就不能引入这个ieBetterjs, 须单独处理每个不兼容方法或者把addEventListener的处理部分删除。
另外,在ie8使用jquery 1.11.1中会报“document.defaultView对象为空或不是对象”的错误,原因是ie8并没有这个对象。
而其实在高版本的浏览器中document.defaultView和window是同一个对象,可以通过在ie hack给document.defaultView赋值来解决:
以上便是在项目中遇到的兼容性问题解决方法。由于项目本身比较简单,遇到的问题不多,如果以后有更多经验,我会继续整理。
ie8和html5的兼容性,ie8网页兼容性不完全指南相关推荐
- html5 网页兼容性测试工具,网页兼容性测试工具(MultiBrowser)
网页兼容性测试工具(MultiBrowser) MultiBrowser就能够让你同时检查同一网页在chrome.firefox.ie等浏览器中显示是否正常,而其中的代码编辑器和开发者工具还能够大大提 ...
- 测试网页兼容性时如何选择浏览器
最近有测试Web的项目,合理的选取测试的浏览器是个重大问题,于是翻了几天资料,主要从以下几个方面来选择测试的浏览器: 1.浏览器的内核:使用到主流浏览器内核的浏览器需要测试 2.各浏览器在国内的市 ...
- ie8 html 语音标签,让IE8支持html5中的video标签
这是一篇综合几个前辈的解决方案. 使用video的时候,要遇到的问题. ①不兼容ie9及其以下版本 在 里添加两行, 参考张鑫旭前辈的博客,但是在ie8中薄播放. ②又要无休止的找ie8的解决方法,自 ...
- html5中新增标签的兼容性如何设置,HTML5新标签的兼容性处理
普通浏览器 普通不支持HTML5新标签的浏览器 -- 能正常解析,但会当初成 inline 元素对待 在不支持HTML5新标签的浏览器里,会将这些新的标签解析成行内元素(inline)对待,所以我们只 ...
- 网页兼容性调好了么?
网页兼容性调好了么? ↓↓↓ 转自:@Internet-Explorer
- 兼容性向前还是向后_向后兼容性与向前兼容性
兼容性向前还是向后 When building a client-server application, the client and server need to agree on how to t ...
- 02前端入门HTML5 +CSS3+电商网页制作:CSS
02前端入门HTML5 +CSS3+电商网页制作 0 来源 1 CSS基础 1.1 基础认识 1.1.1 css demo 1.1.1 css的层叠性 1.2 CSS引入方式 1.3 选择器 1.4 ...
- 《HTML5游戏编程核心技术与实战》——第1章 游戏和HTML5初探1.1 网页游戏和HTML5...
本节书摘来自异步社区<HTML5游戏编程核心技术与实战>一书中的第1章,第1.1节,作者: 向峰 更多章节内容可以访问云栖社区"异步社区"公众号查看. 第1章 游戏和H ...
- 15款免费的 HTML5/CSS3 响应式网页模板
如果你想快速制作出一个优秀的网站,网站模板一定是必不可少的.网页设计师和开发人员也可以从网站模板入手,学习先进的布局方式和编码风格.下面这个列表为大家挑选了15款免费的 HTML5/CSS3 响应式网 ...
- HTML5七夕情人节表白网页(爱心雨-满屏爱心飘落)HTML+CSS+JavaScript
HTML5七夕情人节表白网页❤(爱心雨-满屏爱心飘落)❤ HTML+CSS+JavaScript 这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此 ...
最新文章
- 界面交互推荐-25个闪亮创意的404错误页面设计-你从中发现了什么
- android:scaleType=matrix布局文件加载图片时候的显示方式
- 在Centos 6.5 上面配置 SVN
- 题目1009:二叉搜索树
- mysql jdbc 协议_JDBC-MySql
- 俄罗斯“指尖旋风”席卷南京
- webgl 游戏_如何选择 WebGL 框架和引擎?
- TensorFlow中Variable()和get_variable()
- react-native调用安卓原生,如果调用没有参数的方法会报错,会提示没有加入参数.
- Xcode9 2 编译在iOS8 1 系统上图片显示异常
- ecshop 多语言版 fckeditor,支持中文英文韩文等众多语言
- SPI通信调试(ADXL362)
- ENVI_IDL:批量拼接Modis Swath的逐日数据并输出为Geotiff格式
- 【搞定算法】蓄水池算法
- 06 基于MAC和国外服务器及WordPress搭建个人网站
- 曼尼托巴大学计算机科学专业怎么样,加拿大曼尼托巴大学优势专业有哪些
- java的tey语句return了_Java finally语句到底是在return之前还是之后执行?
- 基于php学生信息管理系统——计算机毕业设计
- c# 中崎_C#版OPOS打印(基于北洋OPOS SDK二次开发包,支持EPSON和北洋、佳博、商祺等支持标准ESC/POS指令的POS打印机)...
- 前端开发icon高清图标搜索、下载网站
热门文章
- C语言和C++的一些区别
- eXtremeDB打开连接问题
- AI药物设计与新药先导化合物筛选
- 光纤到计算机过程,光纤光缆生产工艺流程详细分解.doc
- 专利评估的方法与流程!
- 多功能无线串口,空旷条件下传输距离可以达到1000米
- 基于JavaSwing和BeautyEye美化包实现的小型资源管理器
- 如何将Myeclipse的一个工作空间的配置文件复制到另一个工作空间
- [总结]FFMPEG视音频编解码零基础学习方法【转】
- 用C语言用指针怎么算通用定积分,C语言:利用函数指针编写一个用矩形法求定积分的通用函数,包括正弦,余弦和指数函数,...