浏览器兼容性问题及其解决方案

大家好，欢迎来到IT知识分享网。

一、认识浏览器

四大内核： Blink、Gecko、WebKit、Trident (不再活跃)

主流浏览器：
IE(Trident内核)、Firefox(火狐：Gecko内核)、Safari(苹果：webkit内核)、Google Chrome(谷歌：Blink内核)、Opera(欧朋：Blink内核)

二、了解兼容问题

W3C对标准的推进，Firefox，Chrome，Safari，Opera的出现，结束了IE雄霸天下的日子。

1、什么是浏览器兼容性问题

2、不一样的原因是什么

浏览器各浏览器使用了不同的内核，并且它们处理同一件事情的时候思路不同。

3、为什么浏览器会存在兼容问题？

• 同一浏览器，版本越老，存在 bug 越多，相对于版本越新的浏览器，对新属性和标签、新特性支持越少。
• 不同浏览器，核心技术(内核)不同，标准不同，实现方式也有差异，最终呈现出来在大众面前的效果也是会有差异。
• 设计师写出了不规范的代码，不规范的代码会使不兼容现象更加突出。

从浏览器内核的角度来看，浏览器兼容性问题可分为以下三类：

• 渲染相关：和 样式 相关的问题，即体现在布局效果上的问题。
• 脚本相关：和 脚本 相关的问题，包括JavaScript和DOM、BOM方面的问题。对于某些浏览器的功能方面的特性，也属于这一类。
• 其他类别：除以上两类问题外的功能性问题，一般是浏览器自身提供的功能，在内核层之上的。

不规则的嵌套：

<div> <li>新闻标题一</li> <li>新闻标题一</li> <li>新闻标题一</li> </div> 

div 中直接嵌套 li 元素是不合标准的，li 应该处于 ul 内。此类问题常见的还有 p 中嵌套 div， table等元素。

不规范的DOM接口和属性设置：

document.all.a_name.style.top = 35; 

上面代码中 top 的值，其实应该是一个字符串值，需有单位。例如：35px。

总之，人为的原因也占很大一部分。而人为造成兼容性问题的原因，除了粗心之外，大都源于浏览器bug的存在，和开发者对标准的不了解。

比如，如果要做一个功能，功能是想让鼠标悬停在 img 元素上方时，可以出现提示信息，经常针对 IE 做开发的人，可能会使用 img 元素的 “alt” 属性，但其他浏览器中就是不给 “alt” 属性面子。因为 W3C 标准中规定要去做这件事的属性是 “title”，大多浏览器符合标准，IE 不符合，这是 IE 浏览器内核的问题；开发者不知道 “title” ，不遵循标准去写代码，是开发者的问题。

所以，一个问题分两半，浏览器和开发者都有责任。既然都有责任，就都有义务去解决兼容性问题。那么，从浏览器的角度来讲，它的厂商应该修复浏览器的 bug 和不合标准的地方，当某一天 IE 的 “alt” 不能用于提示了，还有人用这个错误的属性去显示提示么？

从开发者角度来讲，多了解标准，了解浏览器兼容性问题，就可以在开发的过程中，有效的避开兼容性问题，让你的页面在所有浏览器中畅通无阻。

三、处理兼容问题的思路

1、要不要做？

（1）从产品的角度看：产品的受众、受众的浏览器比例、效果优先还是基本功能优先。

（2）成本的角度：有无必要做这个兼容。

2、做到什么程度？

让哪些浏览器 支持 哪些效果

3、怎么做？

4、渐进增强和优雅降级

四、JS兼容

1、vue项目在IE11下一片空白

原因：
IE10浏览器解析不了es6的语法，需要我们使用babel（Babel是一种工具链，主要用于将ECMAScript 2015+代码转换为当前和旧版浏览器或环境中的向后兼容版本的JavaScript）。但是Babel 默认只转换新的 JavaScript 语法（syntax），而不转换新的 API ，比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign）都不会转码。

解决方法1：babel-polyfill
在vue项目中安装babel-polyfill，polyfill翻译过来叫做垫片/补丁。就是用社区上提供的一段代码，让我们在不兼容某些新特性的浏览器上，使用该新特性。

npm install --save-dev babel-polyfill 

npm i --save core-js 

在main.js入口文件中引入:

2.'core-js' 导入几种形式： // 导入所有新提案api import "core-js"; // 唯一稳定的'core js'功能-es和web标准 import "core-js/stable"; // 仅支持稳定的ES功能 import "core-js/es"; // 只导入指定api import "core-js/features/set"; import "core-js/stable/set"; import "core-js/es/set"; 

总结：简单使用，不太考虑优化： 1.npm i –save core-js 2.main.js入口文件中导入import “core-js”;
推荐使用：兼容性推荐使用core-js,因为core-js包含了babel-polyfill，且babel-polyfill已经逐步放弃使用了

2、addEventListener 与 attachEvent 区别

attachEvent ——兼容：IE7、IE8；不兼容 firefox、chrome、IE9、IE10、IE11、safari、opera。
addEventListener——兼容：firefox、chrome、IE、safari、opera；不兼容 IE7、IE8

function addEvent(elm, evType, fn, useCapture) { 
    if (elm.addEventListener) { 
    // W3C标准 elm.addEventListener(evType, fn, useCapture); return true; } else if (elm.attachEvent) { 
    // IE var r = elm.attachEvent('on' + evType, fn); // IE5+ return r; } else { 
    elm['on' + evType] = fn; // DOM事件 } } 

3、事件对象的兼容

 e = ev || window.event 

4、滚动事件的兼容

scrollTop = document.documentElement.scrollTop || document.body.scrollTop 

5、阻止冒泡的兼容

if (e.stopPropagation) { 
    e.stopPropagation() } else { 
    e.cancelBubble = true } 

6、阻止默认行为的兼容

link.onclick = function(event) { 
    // 执行自定义逻辑 if (event.preventDefault) { 
    event.preventDefault(); } else { 
    event.returnValue = false; } return false; }; 

7、const 问题

8、event.x 与 event.y 问题

IE下，event 对象有 x、y 属性，但是没有 pageX、pageY属性；Firefox下，event 对象有pageX、pageY属性，但是没有 x、y属性。

var myX = event.x ? event.x : event.pageX; var myY = event.y ? event.y : event.pageY; 

9、禁止选取网页内容

在Firefox下需要用CSS禁止选取网页内容，在IE用JS禁止

-moz-user-select: none; // Firefox obj.onselectstart = function { 
   return false;} // IE 

五、CSS兼容

1、ormalize.css

使用ormalize.css 抹平差异，同时可以定制自己的 reset.css，例如通过通配符选择器或者标签选择器（推荐），全局重置样式

2、CSS3兼容前缀表示

.box{ 
    height: 40px; background-color: red; color: #fff; border-radius: 5px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } 

可以使用 Autoprefixer 是一个用于自动添加 CSS 浏览器前缀的工具，以确保你的样式在不同浏览器中正确地显示。它可以根据 Can I Use 数据库来确定需要添加哪些前缀，以满足特定的浏览器兼容性要求。

安装Autoprefixer

npm install autoprefixer --save-dev 

配置 Autoprefixer：

// .browserslistrc last 2 versions > 1% IE 11 // 这个配置表示支持最新的两个浏览器版本 // 全球使用率超过1%的浏览器，以及 Internet Explorer 11。 

使用 Autoprefixer：

const autoprefixer = require('autoprefixer'); module.exports = { 
    module: { 
    rules: [ { 
    test: /\.css$/, use: [ 'style-loader', 'css-loader', { 
    loader: 'postcss-loader', options: { 
    postcssOptions: { 
    plugins: [ autoprefixer(), ], }, }, }, ], }, ], }, }; 

在上述示例中，postcss-loader 用于调用 Autoprefixer 插件。

Autoprefixer 会根据你指定的目标浏览器版本自动添加适当的前缀，以确保样式在这些浏览器中正确渲染。这简化了开发人员在编写样式时考虑兼容性的工作。

3、图片加a标签在IE9中会有边框

img{ 
   border：none} 

4、IE9以下浏览器不能使用opacity

Firefox/Chrome/Safari/Opera浏览器使用opacity；IE浏览器使用filter

opacity: 0.7; /*FF chrome safari opera*/ filter: alpha(opacity:70); /*用了ie滤镜,可以兼容ie*/ 

5、cursor兼容问题

统一使用 {cursor：pointer}

6、a标签css状态的顺序

按照link–visited–hover–active 的顺序编写

7、在Chrome中字体不能小于10px

p{ 
   font-size: 12px; transform: scale(0.8);} 

…

这里推荐一个网站，把css转换成兼容的

http://autoprefixer.github.io/

六、移动端兼容问题

1、禁止iOS弹出各种操作窗口

-webkit-touch-callout:none 

2、禁止iOS和Android用户选中文字

-webkit-user-select:none 

3、iOS下取消input在输入的时候英文首字母的默认大写

<input autocapitalize="off" autocorrect="off" /> 

4、Android下取消输入语音按钮

input::-webkit-input-speech-button { 
   display: none} 

5、在移动端修改难看的点击的高亮效果，iOS和安卓下都有效

* { 
   -webkit-tap-highlight-color:rgba(0,0,0,0);} 

6、在Android上placeholder文字设置行高会偏上

input有placeholder情况下不要设置行高

7、overflow: scroll或auto；在iOS上滑动卡顿的问题

-webkit-overflow-scrolling: touch; 

8、iOS中日期如：2022-02-22 00:00:00格式的时间转时间戳不成功

需要将时间中的’00:00:00去除之后才能转为时间戳’