一、CSS方面
01. flex布局中: flex: 1的子元素超出部分出滾動(dòng)條冒签；但是IE下，橫向滾動(dòng)條撐滿整屏問題
.parent {
display: flex
}
.child {
# 配合 overflow: hidden
overflow: hidden;
flex: 1;
}
.child div {
overflow-x: auto
width: 100%;
}
02. chrome下默認(rèn)會(huì)將小于12px的文本強(qiáng)制按照12px來(lái)解析的問題
# 解決辦法是給其添加屬性：
-webkit-text-size-adjust: none;
03. display: inline-block行內(nèi)塊元素之間空白縫隙的問題
# 解決辦法是給父盒子加：
font-size:0;
04. 強(qiáng)制內(nèi)核渲染
// 解決辦法是
<meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1">
05. input/trextarea：取消輸入框默認(rèn)有內(nèi)部陰影
// 解決辦法是
input,
textarea {
border: 0; /* 方法1 */
-webkit-appearance: none; /* 方法2 */
}
/*取消input和textarea的聚焦邊框*/
input{outline:none}
06. input/trextarea：placeholder設(shè)置顏色
// 解決辦法是
textarea::-webkit-input-placeholder{ color:#foo;}
input::-webkit-input-placeholder{ color:#f00;}
07. textarea可拖動(dòng)放大
// 解決辦法是
textarea{resize:none}
08. 去掉a、input和button點(diǎn)擊時(shí)的藍(lán)色外邊框和灰色半透明背景
// 解決辦法是
a,button,input,optgroup,select,textarea {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
09. 消除 IE10 input里面的那個(gè)叉號(hào)
// 解決辦法是
input:-ms-clear{
display:none;
}
10. 移動(dòng)端去掉長(zhǎng)按選擇
// 解決辦法是
div,span,p,img{
-webkit-user-select: none; /*禁用手機(jī)瀏覽器的用戶選擇功能 */
-moz-user-select:none;
-khtml-user-select:none;
user-select:none;
}
11. 長(zhǎng)時(shí)間按住頁(yè)面出現(xiàn)閃退
// 解決辦法是
.ele {
-webkit-touch-callout:none;
}
12. 禁止長(zhǎng)按鏈接與圖片彈出菜單
// 解決辦法是
a, img {
-webkit-touch-callout: none;
}
13. 移動(dòng)端畫1px的細(xì)線
// 解決辦法是
.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/>標(biāo)簽?zāi)J(rèn)有間距寺旺，
// 解決辦法是
.img {
display: block;
}
<p>
<img class="img" />
</p>
15. 設(shè)置min-height不兼容
// 解決辦法是
.ele {
min-height:200px;
height:auto !important;
height:200px;
overflow:visible;
}
二、JS方面
1. 移動(dòng)端瀏覽器日期格式兼容問題:
# 解決辦法是統(tǒng)一使用 2019/01/01 00:00:00 格式：
2019/01/01 00:00:00
2. 移動(dòng)端瀏覽器點(diǎn)擊穿透的問題: 引起原因onclick帶有300ms延遲
# 解決辦法是統(tǒng)一使用 touch/tap定義事件, 或者使用zepto.js
