简述
    所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。

常见的浏览器内核（渲染引擎）
    四种内核： Trident、Gecko、Blink、Webkit

CSS兼容性问题

1. 不同浏览器的标签默认的外边距 ( margin ) 和内边距 ( padding ) 不同

解决方案一： css 里增加通配符 * { margin: 0; padding: 0; }

解决方案二： body,h1,h2,h3,ul,li,input,div,span,a,form …… { margin: 0; padding: 0; }

2. 在 IE6及以下版本中设置了 float，同时又设置 margin，就会出现双边距浮动问题

问题描述：任何浮动的元素上的外边距加倍

解决方案：在 float 的标签样式控制中加入 display: inline; 将其转化为行内属性

3. IE6下默认有行高

解决方案：overflow: hidden;或 font-size: 0; 或 line-height: xx px;

4. 图片默认有间距

解决方案：使用 float 属性为 img 布局

5. IE6及以下版本，不支持最小高度 min-height
.
    问题描述：IE6不支持 min-height 属性。即使定义了元素高度，如果内容超过元素的高度，IE6在解析时，会自动延长元素的高度

解决方案：利用 IE6 不识别 !important，给元素设置固定高度，并且设置元素高度自动。height: auto !important; height: 300px; min-height: 300px; IE7 及其其他浏览器都识别 !important，虽然定义了 height: 300px，但是 !important 的优先级最高。所以内容超过 300px 时，还是会自动延长。

6. IE8及以下版本不支持 opacity

解决方案：opacity: 0.5; filter: alpha(opacity = 50); -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(opacity = 80)”;

7. IE6以下的 3 像素问题

问题描述：两个相邻的 div 之间有3个像素的空隙，一个 div 使用了 float，而另一个没有使用产生的。

解决方案一：对另一个 div 也使用 float

解决方案二：给浮动的 div 添加属性 margin-right: –3px，但是这样写，在其他浏览器又会不正常，所以我们需要添加 IE6 的 hack，在属性 margin-right 前添加下划线 margin-right: –3px。（ IE6 以及更低版本的 hack，是在属性前面添加下划线）

8. 块级元素上下边距合并问题

问题描述：当上下相邻元素都设置了 margin 边距时，margin 将取最大值，舍弃小值

解决方案：可以给子元素添加一个父元素，并设置该父元素：overflow: hidden;

9. IE9 以下浏览器不识别 HTML5 新增标签问题

解决方案：

<!--[if lt IE 9]>
 	<script type="text/javascript" src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->

10. margin 塌陷问题

问题描述：如果一个大盒子中包含一个小盒子, 给小盒子设置 margin-top 大盒子会一起向下平移

解决方案一：给父盒子加一个边框 border: 1px solid black;

解决方案二：给父盒子加 padding-top: xx px;

解决方案三：给父盒子设置属性 overflow: hidden;

解决方案四：给父盒子设置浮动 float: left;

解决方案五：给父盒子设置为行内块 display: inline-block;

11. 清除浮动

问题描述：浮动元素撑不开父级容器

解决方案一：额外标签法。在浮动的盒子内部最后，再放一个块级标签，在这个标签内使用 clear: both;

解决方案二：使用 overflow 清除浮动。在父元素中添加一个属性 overflow: hidden;

解决方案三：使用伪元素清除浮动。

.clearfix::after {
	content: "";      /* 伪元素必须给这个content='' */
    display: block;   /* 必须块级才能清除 */
    clear: both;      /* 核心代码 */
    /* 保证伪元素在页面中看不到 */
	height:0;
    line-height:0;
	visibility:hidden;
}
/* 兼容 IE 67 */
.clearfix {
  *zoom: 1;
}

解决方案四：给父盒子设置高度

IE属性过滤器（较为常用的hack方法）

浏览器CSS兼容前缀

-o-transform: rotate(7deg);        // Opera
-ms-transform: rotate(7deg);       // IE
-moz-transform: rotate(7deg);      // Firefox
-webkit-transform: rotate(7deg);   // Chrome
transform: rotate(7deg);           // 统一标识语句

JS兼容性问写法

1. 获取网页宽和高的兼容性问题

var winW = document.body.clientWidth || document.documentElement.clientWidth   // 网页可见区域宽
var winH = document.body.clientHeight || document.documentElement.clientHeight // 网页可见区域宽
// 以上为不包括边框的宽高，如果是 offsetWidth 或者 offsetHeight 的话包括边框

var winWW = document.body.scrollWidth || document.documentElement.scrollWidth   // 整个网页的宽
var winHH = document.body.scrollHeight || document.documentElement.scrollHeight // 整个网页的高

var screenH = window.screen.height // 屏幕分辨率的高
var screenW = window.screen.width  // 屏幕分辨率的宽
var screenX = window.screenLeft    // 浏览器窗口相对于屏幕的x坐标（除了Firefox）
var screenXX = window.screenX      // FireFox相对于屏幕的X坐标
var screenY = window.screenTop     // 浏览器窗口相对于屏幕的y坐标（除了Firefox）
var screenYY = window.screenY      // FireFox相对于屏幕的y坐标

2. 获取滚动条距离的兼容性问题

var scrollTop = document.body.scrollTop || document.documentElement.scrollTop // 网页被卷去的高
var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft // 网页左卷的距离

3. 获取行外样式 currentStyle 和 getComputedStyle 的兼容性问题

function getStyle(el, name){
    if(el.currentStyle) {
        // IE
        return el.currentStyle[name]
    } else {
        // Chrom, Firefox
		return getComputedStyle(el, false)[name]
	}
}

4. 用 “索引” 获取字符串每一项的兼容性问题

var str = 'abcdefg'

alert(str[0])  // 低版本的浏览器IE6, 7不兼容
	
alert(str.charAt(0))  // 兼容所有浏览器

5. 使用 event 对象时的兼容性问题

document.oncilck = function(ev) {
    var e = ev || window.event
    alert(e.clientX)
}

6. 阻止事件冒泡的兼容性问题

document.oncilck = function(ev) {
    var e = ev || window.event
    if (e.stopPropagation) {
        e.stopPropagation()    // W3C标准
    } else {
    	e.cancelBubble = true  // IE..
    }
}

7. 阻止事件默认行为的兼容性问题

document.oncilck = function(ev) {
    var e = ev || window.event
    if (e.preventDefault) {
        e.preventDefault()      // W3C标准
    } else {
    	e.returnValue = false   // IE..
    }
}

8. 获取事件目标对象的兼容性问题

document.oncilck = function(ev) {
    var e = ev || window.event
    var target = e.target || e.srcElement         // 获取 target 的兼容写法，后面的为 IE
    var from = e.relatedTarget || e.formElement   // 鼠标来的地方，同样后面的为 IE...
    var to = e.relatedTarget || e.toElement       // 鼠标去的地方
}

9. 获取键盘按键码的兼容性问题

document.onkeydown = function(ev) {
	var e = ev || window.event
	var code = e.keyCode || e.which || e.charCode
	console.log(code)
}

10. 设置监听事件的兼容性问题

// 设置监听事件
function addEvent(el, type, fn) {        // 添加事件监听，三个参数分别为 对象、事件类型、事件处理函数，默认为 false
    if (el.addEventListener) {
        el.addEventListener(type, fn, false)    // 非IE
    } else {
        el.attachEvent('on' + type, fn)     // IE,这里已经加上on,传参的时候注意不要重复加了
    }
}
// 删除事件监听
function removeEvent(el, type, fn) {  
    if (el.removeEventListener) {
        el.removeEventListener(type, fn, false)    // 非IE
    } else { 
        el.detachEvent('on' + type, fn)    // IE,这里已经加上on,传参的时候注意不要重复加了
    }
}

11. 获取DOM节点的兼容性问题

// DOM节点相关，主要兼容IE 6 7 8

// 获取下一个兄弟节点
function nextnode(el) {
    if (el.nextElementSibling) {
        return el.nextElementSibling  // 非IE6 7 8 支持
    } else{
        return el.nextSibling  // IE6 7 8 支持
    }
}
// 获取上一个兄弟节点
function prenode(el) {
    if (el.previousElementSibling) {
        return el.previousElementSibling   // 非IE6 7 8 支持
    } else{
        return el.previousSibling     // IE6 7 8 支持
    }
}
// 获取第一个子节点
function firstnode(el) {
    if (el.firstElementChild) {
        return el.firstElementChild   // 非IE6 7 8 支持
    } else{
        return el.firstChild    // IE6 7 8 支持
    }
}
// 获取最后一个子节点
function lastnode(el) {
    if (el.lastElementChild) {
        return el.lastElementChild    // 非IE6 7 8 支持
    } else{
        return el.lastChild     // IE6 7 8 支持
    }
}

12. 监听鼠标的滑轮滚动事件的兼容性问题

// 给页面绑定鼠标滑轮滚动事件
var scrollFunc = function(e) {
	var e = e || window.event
    if (e.wheelDelta) {     // 判断浏览器 IE, Chrome滑轮事件
       	// 当滑轮向上滚动时
	    if (e.wheelDelta > 0) {
		    console.log("滑轮向上滚动")
		    console.log(e.wheelDelta)
	    }
	    // 当滑轮向下滚动时
	    if (e.wheelDelta < 0) {
	        console.log("滑轮向下滚动")
	        console.log(e.wheelDelta)
	    }
    } else if (e.detail) {   // Firefox滑轮事件
    	// 当滑轮向上滚动时
	    if (e.detail> 0) {  
		    console.log("滑轮向上滚动")
		    console.log(e.detail)
	    }
	    // 当滑轮向下滚动时
	    if (e.detail < 0) { 
			console.log("滑轮向下滚动")
			console.log(e.detail)
	    }
    }
}

// Firefox 使用 DOMMouseScroll 绑定滑轮事件
if(document.addEventListener) {
	document.addEventListener('DOMMouseScroll', scrollFunc, false)
}
// W3C标准   IE/Opera/Chrome 
window.onmousewheel = document.onmousewheel = scrollFunc

连接需要登录界面的无线网络时候，Microsoft edge老是会出现兼容性问题的错误。

这时候设置什么也打不开。

通过网上搜索，我是通过修改注册表的方法成功的。

Win10 Edge兼容性问题打不开|解决浏览器兼容性问题_白云一键重装系统

步骤一：打开运行

①可以同时按键盘的Win和R键打开

②电脑左下角搜索运行即可

步骤二： 在运行中输入 regedit 命令，点击确定

步骤三：找到Microsoft Edge注册表的位置

一个文件夹一个文件夹的点击进行

 计算机\HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Microsoft

步骤四：在Microsoft文件夹右键新建一个"项" ，命名为Edge

步骤五：在Edge文件夹右边界面空白部分右键新建一个"DWOED(32 位)值"

将名称命名为：

RendererCodeIntegrityEnabled

数值数据为：

0    十六进制 

步骤六：点击确定，并重启Microsoft Edge，重新连接无线即可跳出登录界面。

前言

作为一名菜鸡前端，我经常被safari的浏览器兼容性折磨，所以在此做一个曾解决过的兼容性问题总结，给日后不了解如何处理兼容性问题的前端同学提供一个思路。

低版本IOS Safari浏览器不兼容ES6语法

这是我首次跟safari浏览器打交道，在跟别的公司对接H5页面的时候发现的问题，他们的app最低可支持ios10的系统安装，他们的测试在用ios11.2的系统打开我们的H5页面时便出现了白屏，身边的同事也都没有用低版本的ios的，同时我也不知道页面报的是什么错误，此时一度陷入困境，在不清楚问题的情况下去解决报错，贸然更改代码与配置太过冒险，公司的电脑用的是Windows系统，安装虚拟机来还原低版本的ios环境或许是解决这个问题的方法。

先去黑苹果社区去下载一个macOs的镜像，这里我选择的版本是macOs11.1，虚拟机安装mac系统详情可见该篇文章VMWare15 安装 Mac OS系统(图文教程)
安装mac系统是为了使用Xcode，Xcode可以模拟ios的环境。mac环境都准备完毕后，进入Xcode设置里面的Preferences，选择Components，下载需要的ios版本。

运行对应的ios版本即可实现在Windows上打开ios设备（模拟），解决了没有低版本ios真机的痛点。

打开模拟器后发现低版本的ios系统的safari确实打不开H5页面，在项目的入口index.html文件中加入如下代码

<script type="text/javascript" src="//cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>

引入一个小插件，可以实现在移动端设备上打开控制台。

打开控制台后问题终于水落石出，Unexpected token ‘…’. Expected a property name，ES6拓展语法导致的代码报错。

在项目中的.babelrc文件中加入如下配置

"presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns":"usage",
        "corejs":{
          "version":"3",
          "proposal":true
        },
        "targets":{
          "chrome":"60",
          "safari":"10"
        }
      }
    
    ],
    "@babel/preset-react"
  ],
"plugins": [
    "@babel/plugin-transform-runtime",
  ]

配置更改后重新编译发布，低版本ios设备可正常访问

至此，首个safari浏览器兼容性问题得以解决，整个过程的关键在于如何复现问题，发现报错。如果有低版本ios设备的同学可以绕过安装虚拟机macOs系统去使用Xcode模拟器，直接引入查看控制台的插件，即可看到报错。

Safari浏览器不支持YY-MM-DD hh:mm:ss时间格式

项目中做了一次时间格式调整，所有的时间需要带时分秒，调整完以后用户发现某款产品无法计算年龄，调整了项目中的代码，计算年龄的时候使用YY-MM-DD的格式，从而解决了这个问题。

Safari浏览器不支持正则的零宽断言

在项目中为了替换#{}的内容，使用了零宽断言，导致safari浏览器又双报错了，故换了一种正则匹配方式，下面是我变更后的代码，有兴趣的同学可以参考一下（我的正则写的烂，可以酌情吐槽一下）。

// 根据环境变量替换链接中的url
function transformUrl(url){
  /**正则表达式 */
  // const re = new RegExp('(?<=\#\{).*?(?=\})', 'g'); //匹配#{}里面的内容 零宽断言写法
  const re = new RegExp('\#\{(.*?)\}', 'g'); //匹配#{}里面的内容
  const tUrl = _.map([...new Set(url.match(re))], item => { // 去重
    return item.slice(2,-1) // 去除#{}
  })
  let nUrl = _.cloneDeep(url);
  _.forEach(tUrl, item => {
    if(window?.env?.[item]){
      // const reg = new RegExp(`(?<=\#\{)\(${item}\)\*\?(?=\})`, 'g'); //匹配#{}里面的内容 零宽断言写法
      // const exReg = new RegExp(`\#\{\(${window.env[item]}\)\*\?\}`, 'g'); // 匹配#{}，目的去除#{} 零宽断言写法
      const reg = new RegExp(`\#\{(${item})\}`, 'g'); //匹配#{}里面的内容
      const exReg = new RegExp(`\#\{\(${window.env[item]}\)\*\?\}`, 'g'); // 匹配#{}，目的去除#{}
      const replaceUrl = _.replace(nUrl, reg, window.env[item]);
      const newRepUrl = _.replace(replaceUrl, exReg, window.env[item]);
      nUrl = newRepUrl;
    }
  })
  return nUrl;
}

小结

兼容性问题不同于开发过程中遇到的bug，需要慢慢发现并消化，多方面的去思考解决方案，可以从配置或代码层面入手；作为一个前端开发，平时也不应当只以谷歌浏览器作为开发视角，也可以多关注一下其他的浏览器。最后推荐一个网站Can i use，用于查看各个浏览器的兼容性，祝各位前端同学都能妥善处理各种兼容性问题。