6年前端开发整理出的日常开发中碰到的兼容适配问题

前言

这几天看了一下自己以前写的开发笔记，发现自己也从一个初出茅庐只会面向群编程的菜鸟变成在群里给别人解答问题的老鸟了。正好将自己做前端6年以来碰到的一些项目中很常见的兼容适配问题以及解决方案整理出来分享出来，加快大家进阶老鸟的进度。

1.扩大按钮可点击区域

常见于手机端勾选协议按钮，弹框的"x"号，由于按钮设计的较小，用户手指跟屏幕接触的面积较大，用户需要点击多次才能触发事件，体验较差，需要在不改变ui的前提下扩大按钮的点击区域。

解决：

1. 使用伪元素(伪元素相对于父元素定位向四周延展，可以设置为任意尺寸甚至脱离原本按钮位置)

.btn {
    width: 16px;
    height: 16px;
    position: relative;
}

.btn::before {
    content: '';
    position: absolute;
    top: -10px;
    right: -10px;
    bottom: -10px;
    left: -10px;
} 

2. 透明边框(这个方案有时候会影响到其他css属性，比如box-shadow、padding、margin)

.btn {
  border: 10px solid rgba(255, 255, 255, 0);
} 

2.禁止长按时文字选中，图片唤醒原生按钮

常见于手机端需要长按的操作，比如长按保存海报如果点击区域不在海报范围内，点到文字上会触发复制，点在其他图片上会触发原生的按钮组

解决：

//禁止文字选中
text{
    user-select:none;
}
//禁止图片选中
img{
    pointer-events: none
} 

3.较低的ios系统下给图片添加点击事件不触发

解决：

img {
    cursor: pointer;
} 

4.ios系统下图片、input点击后会出现高亮

解决：

img,input {
    -webkit-tap-highlight-color: transparent;
} 

5.ios滚动时卡顿

给元素设置overflow-y:scorll属性时，在部分ios系统下拖动时会出现卡顿，滑动时感觉特别木讷。

解决：

.box {
    -webkit-overflow-scrolling: touch; 

6.ios下输入框光标高度太高

内容垂直居中我习惯使用line-height属性，只要设置的跟height一样高内容就会垂直居中，但是