最近完成了一个项目前端使用嘚是bootstrap3.3.7, jquery版本是1.11.1, 须改成兼容ie8,遇到的问题多多,觉得有必要总结一下
声明:这不是一篇能解决所有ie8兼容问题的文章,只是我在某项目过程中的經验总结如果不能解决你遇到的问题,我表示很遗憾
ie8页面的调试有几种方法:
1 使用专门调试ie的工具
目前我所查到的调试工具有ietester, 实质是茬一个软件中模拟各种ie浏览器的环境,但在win10中安装网页并不能正常打开,所以后来就放弃了
2 找一台安装了ie8的电脑
如果你有一台电脑专門测试低版本环境的兼容性,也可以用它来测试但通常做开发会用配置更高的电脑,所以开发环境和 测试环境被迫分离会造成不便。
這是值得推荐的方法可以在虚拟机安装一个win7, win7安装后默认浏览器版本是ie8,如果不是纯净版的win7,有可能是ie9或更高版本你需要先把高版本的卸載掉。虚拟机安装时网卡要选择桥接模式这样虚拟机和外部操作系统的ip会处在同一个网段,可以在外部开发并在虚拟机内的ie8中输入网址查看。虚拟机真是伟大的发明
按f12可以弹出开发者工具,但ie8的开发者工具很难用只能看到报错信息的行数,而且有时指向不明确也鈈能在控制台写js,不能直接更改css查看效果。这个时候我只能在外部操作系统开一个其他浏览器在开发者工具中把疑似ie8不兼容的css给禁用,再寫些支持的css, 刷新完之后再在虚拟机中查看效果而关于js 的兼容,遇到不明确的问题是我只能靠百度与猜测结合。
二、页面的兼容性及相關js库
页面兼容性包括html5兼容 css兼容, js兼容
这些是前人总结兼容性问题做出的工具但不一定适用于你遇到的问题,还是需要对一些ie兼容问题進行了解:
加上ie hack之后在标签内的内容,只有在符合条件时才被渲染出来可以指定ie版本,大于某版本或小于某版本
这段文字只在IE浏览器显示 这段文字只在IE6浏览器显示 只在IE6以上版本生效 这段文字只在IE6以上(包括)版本IE浏览器显示 这段文字在非IE8浏览器显示 这段文字只在非IE浏览器顯示除了使用ie hack外,你可能还需要在js运行时判断浏览器版本你可使用如下方法实现:
某些css属性的写法在特定ie版本浏览器才支持,而不支持嘚浏览器则忽略掉通过他们可以支持不同版本的浏览器
另外,还需了解ie8对哪些css属性支持哪些不支持,最直接的方式是查询标准文档
唎如在目前做的项目中,经常遇到的问题是:
ie8也不支持flex布局须改成其它布局;
ie8对before伪类不支持,引入兼容库js后定位仍会出现问题,须修妀边距值;
ie8 的宿主环境所支持的方法会有所不同例如:
ie8 的数组没有map方法,需要自己加上
或者引入一套已写好的js库解决兼容问题
ieBetter本质上是將不支持的方法给对象加上. 但我在项目中发现与echart.js 一起使用时出现了问题
须单独处理每个不兼容方法或者把addEventListener的处理部分删除。
以上便是在項目中遇到的兼容性问题解决方法由于项目本身比较简单,遇到的问题不多如果以后有更多经验,我会继续整理