css3 手机兼容性-ios和Android上css的兼容性（持续更新）

1.线性渐变渐变在ios上会有灰色背景

原因：ios不支持transparent表示透明，使用rgba(255,255,255,0)代替

background: -moz-linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
background: -webkit-gradient(linear, top, bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, #fff));
background: -webkit-linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
background: -o-linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
background: -ms-linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);

2、Android机上不显示滚动条

// 手动写scrollbar代码
&::-webkit-scrollbar {
  background-color: #fff;
}
&::-webkit-scrollbar-thumb {
  width: 8px;
  background: #E9E9E9;
  border-radius: 5px;
}

3、font-weight属性在100到600范围内的Android设备上显示字体粗细为400（汉字会有这个问题css3 手机兼容性，字母不会）

原因：不支持字体，建议使用正常和粗细来表示粗细

4.ios无法调出数字键的问题

当type=number不生效时，可以使用inputMode属性。 如果同时存在，则优先使用inputMode。 数值如下：

5、ios的占位符在上侧

方法一：使用padding让提示文字居中，如果font-size:14px，UI高度为40px，我们可以设置height:14px,padding:13px0；

方法2：使用line-height：1px

方法三：使用vertical-align:middle;

经过实践css3 手机兼容性，问题解决了，但是其他浏览器也受到了影响，于是问题就来了，我们需要单独为Safari写一个hack [;line-height:1;]

改变：

6、ios下滚动元素固定定位错误的问题

只需将固定位置放在最内层即可

7、ios上陌陌公众号下dayjs插件使用困难

可能原因：（1）ios本身不支持dayjs （2）ios不支持newDate（yyyy-MM-dd）转换，仅支持newDate（yyyy/MM/dd）转换