一、CSS方面

01. flex布局中: flex: 1的子元素超出部分出滚动条；但是IE下，横向滚动条撑满整屏问题

.parent {
  display: flex
}
.child {
  # 配合 overflow: hidden
  overflow: hidden;
  flex: 1;
}
.child div {
  overflow-x: auto
  width: 100%;
}

02. chrome下默认会将小于12px的文本强制按照12px来解析的问题

# 解决办法是给其添加属性：
-webkit-text-size-adjust: none;

03. display: inline-block行内块元素之间空白缝隙的问题

# 解决办法是给父盒子加：
font-size:0;

04. 强制内核渲染

// 解决办法是
<meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1">

05. input/trextarea：取消输入框默认有内部阴影

// 解决办法是
input,
textarea {
    border: 0; /* 方法1 */
    -webkit-appearance: none; /* 方法2 */
}

/*取消input和textarea的聚焦边框*/
input{outline:none} 

06. input/trextarea：placeholder设置颜色

// 解决办法是
textarea::-webkit-input-placeholder{ color:#foo;}
input::-webkit-input-placeholder{ color:#f00;}

07. textarea可拖动放大

// 解决办法是
textarea{resize:none} 

08. 去掉a、input和button点击时的蓝色外边框和灰色半透明背景

// 解决办法是
a,button,input,optgroup,select,textarea {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

09. 消除 IE10 input里面的那个叉号

// 解决办法是
input:-ms-clear{
  display:none;
}

10. 移动端去掉长按选择

// 解决办法是
div,span,p,img{ 
  -webkit-user-select: none; /*禁用手机浏览器的用户选择功能 */ 
  -moz-user-select:none;
  -khtml-user-select:none;
  user-select:none;
}

11. 长时间按住页面出现闪退

// 解决办法是
.ele { 
  -webkit-touch-callout:none;
}

12. 禁止长按链接与图片弹出菜单

// 解决办法是
a, img {
    -webkit-touch-callout: none; 
}

13. 移动端画1px的细线

// 解决办法是
.border1px{  position: relative;}
.border1px:after{
    content:"";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    border-bottom: 1px solid red;
    transform: scaleY(.5);
    transform-origin: 0 0;
}

14. <img/>标签默认有间距，

// 解决办法是
.img {
  display: block;
}
<p>
  <img class="img" />
</p>

15. 设置min-height不兼容

// 解决办法是
.ele { 
   min-height:200px; 
   height:auto !important;
   height:200px;
   overflow:visible;
}

二、JS方面

1. 移动端浏览器日期格式兼容问题:

# 解决办法是统一使用 2019/01/01 00:00:00 格式：
2019/01/01 00:00:00

2. 移动端浏览器点击穿透的问题: 引起原因onclick带有300ms延迟

# 解决办法是统一使用 touch/tap定义事件, 或者使用zepto.js