本文总结了前端开发中遇到的跨浏览器兼容问题，包括IE8、IE9、IE10的动画和点击事件触发问题，图片布局错乱，颜色显示差异以及字体图标不显示的问题，并给出了相应的解决办法，如修改jQuery版本，设置X-UA-Compatible，修正CSS背景颜色格式，以及正确引入FontAwesome等。
写小米网页的过程都是使用火狐浏览器调整页面布局，当用360浏览器和本机IE浏览器打开时，布局就错乱了。
1. IE8、IE9、ie10不能触发动画显示或者点击事件
我的按钮点击事件click是使用jquary方法写的，网查资料后得知jQuery2.0及以上版本不支持IE8及以下版本的IE浏览器，而我使用的是jQuery3.1.1，所以重新下载jQuery1.x版本的框架。
更换jQuery版本后按钮的点击事件依然不能成功触发，换到IE10浏览器同样不能触发，后来才发现实IE浏览器出于安全性考虑阻止了自己写的脚本，所以此时修改IE浏览器的Internet选项。
方法：设置- Internet选项 – 高级– 安全，下面有一项“允许活动内容在"我的电脑"中运行，打上对勾。重启IE浏览器。要全部关闭IE浏览器，如果还有其他网页开着时，需要重启电脑。
此时动画正常显示，click点击事件也成功触发。
详细参考前端click触发失败解决方法
2. 问题2：
在火狐浏览器上四张图片一排浮动在右侧，IE浏览器打开页面，产品图片一起跑到当前div块下方。引起错乱。
解决方法：
在<head>头部加上X-UA-Compatible设置后，这种页面布局大的错乱就解决了。如下：
html <meta http-equiv="X-UA-Compatible" content="IE=Edge">
X-UA-Compatible是自从IE8新增加的一个设置，对于IE8以下的浏览器是不能识别的，它用于对浏览器兼容性设置。
上面代码告诉浏览器，不管是IE8、IE9还是以上版本，都以最高版本的浏览器的渲染引擎来渲染页面。通过此句代码可以避免IE7及以下浏览器的显示问题。
最低0.47元/天 解锁文章
扫一扫
564
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
