前端开发中常见兼容性问题

---

常见兼容性问题

javascript 兼容

1、iOS/IE 日期的兼容

ios/Ie 下 new Date('2020-03-11 00:00:00') 不生效，需要对日期进行 date.replace(/-/g, '/') 处理。

2、iOS 的 beforeunload 事件的兼容

ios 下 beforeunload 事件废弃了，需要使用 pagehide 事件替代。

3、Android 下，点击 input 框键盘将页面顶起

// html
<input ref="input" v-model="form.name" placeholder="请输入您的名字" @input="inputVal" @focus="focus" />
// js
focus () {
  const u = navigator.userAgent;
  const isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; // 判断机型，android终端
  if (isAndroid) {
    const that = this
    const originalHeight = document.documentElement.clientHeight || document.body.clientHeight
    window.onresize = function () {
      const resizeHeight = document.documentElement.clientHeight || document.body.clientHeight
      if (resizeHeight - 0 < originalHeight - 0) {
        that.$refs.input.style.bottom = `-${originalHeight - resizeHeight}px`
      } else {
        that.$refs.input.style.bottom = `0px`
      }
    }
  }
},

4、iOS 点击 input 框键盘将底部按钮顶起，正常需要隐藏底部按钮

因为是点击input后触发的问题，所以应该在input聚焦时处理，也就是放在focus事件中改变页面的top值。

// vue
<input ref="input" v-model="form.name" placeholder="请输入您的名字" @input="inputVal" @focus="focus" />
// ...
focus () {
  const u = navigator.userAgent;
  const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // 判断机型，ios终端
  if (isiOS) {
    document.body.addEventListener("focusin", () => {
      // 软键盘弹出的事件处理
      this.isShowFooterBar = false;
    });
    document.body.addEventListener("focusout", () => {
      // 软键盘收起的事件处理
      this.isShowFooterBar = true
    });
  }
}

ios：focusin 和 focusout 事件支持冒泡，分别对应 focus 和 blur 事件。
上面的方法中，之所以使用 focusin 和 focusout 的原因是：假设有多个输入框需要处理，这样就可以使用事件代理来处理多个输入框存在的情况了。

5、iOS 键盘收起，页面底部出现空白问题

输入框失去焦点的时候可以滚动下页面

// vue
<input ref="input" v-model="form.name" placeholder="请输入您的名字" @input="inputVal" @blur.prevent="blur" />
// ...
blur () {
  window.scrollTo(0, 0)
}

6、Android 和 iOS 下，表单的 input 事件和 change 事件

ios11之后，有些情况使用 input 事件 ios 自带的输入法，当选择拼音输入时会自动输入多个字符，这是因为有时 ios 对 input 事件不兼容导致的，使用 change 事件即可解决这个问题。

ios 收起输入法时会失去焦点，触发 change 事件，但是 Android 收起输入法时并不会失去焦点，所以可以通过判断 UA（navigator.userAgent） 的方式来针对不同系统使用不同的事件。

css 兼容

1、iOS 下，input 框聚焦时出现 outline 或者阴影

input:focus{outline:none}  // 去除外边框
input:{-webkit-appearance: none;}

2、Android 和 iOS 下，设置 input 框禁止选择内容

• android 中这样实现

input {
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  user-select: none;
}

• ios 中应当将上述样式中的属性 -webkit-user-select 的值由 none 改为 auto

input {
  -webkit-user-select: auto;
}

3、iOS 改变 input 框的默认 placeholder 属性样式

input::-webkit-input-placeholder {
  color: #bbb;
  font-size: 0.3rem;
  line-height: normal;
}

4、iOS 下，input 框输入的内容偏上

• 给你 input 去除 line-height 属性，然后添加下面的样式

input::-webkit-input-placeholder {
  line-height: normal;
}

5、Android 下 line-height 和 height 的兼容

对于一般PC浏览器以及iOS设备的浏览器表现就是我们想要的居中效果，但是大部分 Android 设备的浏览器文字都会稍微向上偏离。
结合行高、对齐的关系 和 伪元素，可以给当前元素添加以下样式来尝试解决该问题：

&::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 100%;
  margin-top: 1px;
}

6、iOS 下，解决 “input 按钮” 样式会被默认样式覆盖的问题

input, textarea {
	border: 0;
    -webkit-appearance: none;
}

7、iOS 下，阻止图片在微信APP内被点击放大

img { pointer-events: none; }

8、Android 下，margin-top 失效

给其父元素添加 padding-top，代替该元素的 margin-top。

9、Android 下页面出现横向滚动条，iOS 正常

给该元素设置：overflow-x: hidden;

10、Android 下给页面设置 fixed 固定定位无效，iOS 正常

给该元素设置（即设置left和top具体数值）：

position: fixed;
left: 0;
top: 0;

11、iOS 适配底部小横条（Android 机上也可以调出这个小横条的）

此方案亦可解决：H5 嵌入式开发时，让页面适配端上提供的组件。
iOS 底部有个小横条，如何保证内容不被横条遮挡呢？最好的办法就是用 CSS 来做下兼容。

• 第一步：需要在 index.html 文件中的 标签中增设 viewport-fit 属性来改变网页在可视窗口的布局方式
  viewport-fit 属性是 iOS11 新增的特性。苹果公司为了适配 iPhoneX 对现有 viewport meta 标签新增加的一个扩展，用于设置网页在可视窗口的布局方式。

viewport-fit 可设置三个值：

auto：默认值，效果与 contain 一样。
contain：可视窗口完全包含网页内容（类似于给 设置：object-fit: contain;）。
cover：网页内容完全覆盖可是窗口（类似于给 设置：object-fit: cover;）。

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">

• 第二步：在需要兼容的页面中用 env() 和 constant() 这两个 CSS 函数来设定安全区域以及边界的距离。

env() 和 constant() 是 iOS11 新增的两个 CSS 特性，用来设定安全区域以及边界的距离。

env() 和 constant() 可设置四个值：

safe-area-inset-left：安全区域离 左边 边界的距离。
safe-area-inset-right：安全区域离 右边 边界的距离。
safe-area-inset-top：安全区域离 顶部 边界的距离。
safe-area-inset-bottom：安全区域离 底部 边界的距离。

.box {
	position: fixed;
    bottom: 0;
    left: 0;
	width: 100%;
    height: 3.87rem;
    padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS<11.2 */
    padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS>=11.2 */
}

【注意】constant 和 env 的先后顺序不能换。

12、iOS 中字体加粗无效 Android 正常

这是我遇到一个奇葩问题，当时去掉 font-family 就好了。

13、iOS 下拉页面时，自定义的头部导航栏消失了

因为，iOS 自带的回弹特效不会触发 scroll 事件，也就导致 scrollTop 的值为 undefined。需要做一个兼容：默认是 0 就好了——let scrollTop = e.target.scrollTop || 0。

html 兼容

1、iOS 下，会将数字当成电话号码，导致变色

加以下meta可解决

<meta name="format-detection" content="telephone=no"> 
<meta http-equiv="x-rim-auto-match" content="none">

浏览器 css兼容

1、浏览器标签的样式表

因为浏览器的品种很多，每个浏览器的默认样式也是不同的，比如button标签，在IE浏览器、Firefox浏览器以及Safari浏览器中的样式都是不同的，所以，通过重置button标签的CSS属性，然后再将它统一定义，就可以产生相同的显示效果。

html,body,div,span,applet,object,,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	font:inherit;
	font-weight:normal;
	vertical-align:baseline;
}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
	display:block;
}
ol,ul,li {
	list-style:none;
}
blockquote,q {
	quotes:none;
}
blockquote:before,blockquote:after,q:before,q:after {
	content:'';
	content:none;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
th,td {
	vertical-align:middle;
}
/* custom */
a {
	outline:none;
	color:#16418a;
	text-decoration:none;
	-webkit-backface-visibility:hidden;
}
a:focus {
	outline:none;
}
input:focus,select:focus,textarea:focus {
	outline:-webkit-focus-ring-color auto 0;
}

2、 css3新属性，加浏览器前缀兼容早期浏览器

-moz- /* 火狐浏览器 /
-webkit- / Safari, 谷歌浏览器等使用Webkit引擎的浏览器 /
-o- / Opera浏览器(早期) /
-ms- / IE */

哪些css3属性需要加：

• 定义关键帧动画 @keyframes
• css3中的变形（transform）、过渡(transtion)、动画(animation)
• border-radius 圆角
• box-shadow 盒子阴影
• flex 弹性布局
• …

3、 块属性标签float后，又有横行的margin情况下，IE 浏览器margin加倍的问题

问题症状: 常见症状是IE6中后面的一块被顶到下一行

解决方案： 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;

4、 设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度

解决方案：

给超出高度的标签设置overflow:hidden;
或者设置行高line-height 小于你设置的高度。

备注： 这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高。

5、 IE浏览器div最小宽度和高度的问题

IE不认得min-这个定义，

#box{
  width: 80px;
  height: 35px;
  }
html>body #box{
 width: auto;
 height: auto; 
 min-width: 80px; 
 min-height: 35px;
 }

6、 超链接访问过后hover样式就不出现的问题

被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决技巧是改变CSS属性的排列顺序: L-V-H-A

a:link {}
a:visited {}
a:hover {}
a:active {}

7、 图片默认有间距

解决方案： 使用float属性为img布局(所有图片左浮)

8、 css hack解决浏览器兼容性

background-color:yellow0; 0 是留给ie8的
+background-color:pink;   + ie7定了；
_background-color:orange; _专门留给神奇的ie6；

浏览器 js兼容

1. 事件绑定监听

• IE: dom.attachEvent();
• 标准浏览器： dom.addEventListener(‘click',function(event){},false);

标准浏览器采用事件捕获的方式对应IE的事件冒泡机制（即标准由最外元素至最内元素或者IE由最内元素到最外元素）最后标准方亦觉得IE这方面的比较合理，所以便将事件冒泡纳入了标准，这也是addEventListener第三个参数的由来，而且事件冒泡作为了默认值第三值默认false，表示事件冒泡方式。

如果浏览器不支持 addEventListener()方法, 你可以使用 attachEvent()方法替代。

var x = document.getElementById("myBtn");
if (x.addEventListener) {   //所有主流浏览器，ie9+
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {      // IE 8 及更早 IE 版本
    x.attachEvent("onclick", myFunction);
}

2. event事件对象问题

    document.onclick=function(ev){//谷歌火狐的写法，IE9以上支持，往下不支持；
        var e=ev;
        console.log(e);
    }
    document.onclick=function(){//谷歌和IE支持，火狐不支持；
        var e=event;
        console.log(e);
    }
    document.onclick=function(ev){//兼容写法；
        var e=ev || window.event;
        var mouseX=e.clientX;//鼠标X轴的坐标
        var mouseY=e.clientY;//鼠标Y轴的坐标
    }

3. event.srcElement(事件源对象)问题

• IE： event对象有srcElement属性，但是没有target属性；
• Firefox: event对象有target属性，但是没有srcElement属性。

解决方法：srcObj = event.srcElement ? event.srcElement : event.target;

4. 获取元素的非行间样式值：

• IE: dom.currentStyle[‘width’] 获取元素高度
• 标准浏览器： window.getComputedStyle(dom, null)[‘width’];

跨浏览器兼容解决方法：

 // 获取元素属性值的兼容写法
  function getStyle(dom,attr){
      if(dom.currentStyle){
         //兼容IE
 　　　　　　dom.currentStyle[attr];
          return dom.currentStyle[attr];
      }else{
         //非IE，
 　　　　return window.getComputedStyle(dom, null)[attr]; 
 　    }
 　 }

5. 阻止事件冒泡传播：

js阻止事件传播，这里使用click事件为例

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

6. 阻止事件默认行为：

js阻止默认事件 一般阻止a链接href，form表单submit提交

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

7. ajax兼容问题

• IE： ActiveXObject
• 其他： xmlHttpReuest
  在IE6以前不是用XMLHttpRequest创建的，所以我们要兼容ie6以前的浏览器要判断他有没有XMLHttpRequest()

<script>
	window.onload = function(){
		var oBtn = document.getElementById('btn');
		oBtn.onclick = function(){
			//1.创建ajax对象
			//只支持非IE6浏览器
			var oAjax = null;
			if(window.XMLHttpRequest){
				oAjax = new XMLHttpRequest();				
				//alert(new XMLHttpRequest());
			}else{
				//只支持IE6浏览器
				oAjax = new ActiveXObject("Microsoft.XMLHTTP");	
			}
			//2.连接服务器,这里加个时间参数,每次访问地址都不一样,浏览器就不用浏览器里的缓冲了,但
			//	但服务器那端是不解析这个时间的
			oAjax.open("get","a.txt?t=" + new Date().getTime(),true);
			//3.发送
			oAjax.send(null);		
			//4.接受信息
			oAjax.onreadystatechange = function(){
				//浏览器与服务器之间的交互,进行到哪一步了,当等于4的时候,代表读取完成了
				if(oAjax.readyState==4){
					//状态码,只有等于200,代表接受完成,并且成功了
					if(oAjax.status==200){
						alert("成功" + oAjax.responseText);	
					}else{
						alert("失败");	
					}	
				}	
			};
				
		};
	};
</script>

---

总结

兼容性问题无处不在~