1、Android和IOS文本垂直居中

Android使用height和line-height相等的方法，会在各种机型产生不同的效果，很多机型不能居中，IOS没问题

解决办法：

不设置元素的高度，设置上下相同的padding值即可

2、隐藏滚动条

给元素添加伪元素，比如：

.container::-webkit-scrollbar {
    width: 0px;
}

3、混合开发APP，屏幕有滚动效果时，IOS端卡顿

-webkit-overflow-scrolling: touch;

4、flex布局，设置每个子项目间距相同，导致最后一行子项目数量小于之前的行时，间距大了的问题

如下图所示：

解决方法：给伸缩容器元素添加伪类，伪类的内容为空，宽度等于伸缩子项目

.flex_container:after {
    content: "";
    width: 1.87rem;
}

5、去除<input type=”number”>时输入框右侧的上下箭头

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
input[type="number"]{
    -moz-appearance: textfield;
}

6、确保所有浏览器下<button>按钮高度一致

<button id="btn"></button>
<label for="btn">按钮</label>
 
button { 
    position: absolute; 
    clip: rect(0 0 0 0); 
} 
label { 
    display: inline-block; 
    line-height: 20px; 
    padding: 10px; 
}

7、一个元素的背景对半显示两个颜色

background: linear-gradient(black 50%, white 50%);

8、border绘制三角形

<div></div>
div {
    border: 50px solid;
    border-color: #000 transparent transparent;
}

效果：