前端跨浏览器兼容问题总结

写小米网页的过程都是使用火狐浏览器调整页面布局,当用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块下方。引起错乱。

解决方法:

头部加上X-UA-Compatible设置后,这种页面布局大的错乱就解决了。如下:
html
X-UA-Compatible是自从IE8新增加的一个设置,对于IE8以下的浏览器是不能识别的,它用于对浏览器兼容性设置。

上面代码告诉浏览器,不管是IE8、IE9还是以上版本,都以最高版本的浏览器的渲染引擎来渲染页面。通过此句代码可以避免IE7及以下浏览器的显示问题。

3.问题3:

用360浏览器打开的网页与火狐浏览器上的背景颜色不一致。颜色发生了变化。

原因:这里是我太弱智,RGB三基色参数传3个,我按照rgba的格式传了,所以导致颜色不一致。

解决方法:

CSS样式中背景色定义的是background:rgb(0,0,0,.6);改为background:rgba(0,0,0,.6);后颜色与火狐浏览器显示一致。

分析:
360浏览器本质上就是本机IE的壳子。

rgba(0,0,0,.6)中前三个数值代表红(red)、绿(green)、蓝(blue)三种颜色的RGB值,第四个数值设置颜色的透明度,就是alpha值。范围从0到1,越接近1表示透明度越低,与数值大小是相反的。

rgb(0,0,0,.6):rgb是三色模式,正确的格式是rgb(0,0,0),例如红色:rgb(255,0,0),三个参数,代表红(red)、绿(green)、蓝(blue)三种颜色的RGB值。#fff:白色,#000:黑色。

4. 问题4:

用360浏览器和IE浏览器打开的网页使用FontAwesome设置的字体图标不显示,使用火狐浏览器可正常显示。

解决方法:

不显示原因是引入方法的问题。

 	原引入方法为:
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
改为:
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">

后字体图标在360浏览器和IE浏览器上都可以正常显示。

你可能感兴趣的:(前端)