遇到的浏览器兼容性问题

写小米网页的过程都是使用火狐浏览器调整页面布局，当用360浏览器和本机IE浏览器打开时，布局就错乱了。

问题1：在火狐浏览器上四张图片一排浮动在右侧，IE浏览器打开页面，产品图片一起跑到当前div块下方。引起错乱。
- 解决方法：在<head>头部加上X-UA-Compatible设置后，这种页面布局大的错乱就解决了。如下：
```
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
```
  X-UA-Compatible是自从IE8新增加的一个设置，对于IE8以下的浏览器是不能识别的，它用于对浏览器兼容性设置。
  上面代码告诉浏览器，不管是IE8、IE9还是以上版本，都以最高版本的浏览器的渲染引擎来渲染页面。通过此句代码可以避免IE7及以下浏览器的显示问题。
问题2：用360浏览器打开的网页与火狐浏览器上的背景颜色不一致。颜色发生了变化。
- 解决方法：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：黑色。
问题3：用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浏览器上都可以正常显示。

遇到的浏览器兼容性问题

猜你喜欢