字体

PingFangSC font-weight 没有 500,按规则会匹配到 400 的字体 如果想用 500 的字体，可以采用 PingFangSC-Medium

Safari input 光标问题

加 line-height

Overflow auto 居中方案， Edge 会出滚动条

https://stackoverflow.com/questions/21248111/overflow-behavior-after-using-css3-transform

??Transform 影响绝对定位的占位么？ overflow 不能对 absolute

ie 样式属性没有 unset

flex Margin auto 垂直居中 ie11 有问题

直接用 flex 的方案 align-items: center;

ie dom 没有 closest 方法

移动端 n*2px font-size 问题

p 段落中嵌入图标，在移动端变形

需要使用 svg ？用了 div+bgimage 出现变形的情况?

实际发现是用了 rem 导致渲染出错

滚动穿透问题

https://github.com/pod4g/tool/wiki/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E6%BB%9A%E5%8A%A8%E7%A9%BF%E9%80%8F%E9%97%AE%E9%A2%98

看下 lego 的实现

webview flex 布局下, 按钮的文字无法居中

字体乱码

外部 css 样式中，伪元素的 content 有中文字符，导致页面渲染时乱码。

出现时机：

• 开启代理
• 某些浏览器偶现，比如 ie11

按理说， 所有文件编码都为 utf8 ，且 html 文件里已设置

<meta charset="utf-8">

样式渲染时中文字符是不会乱码的。

怀疑:

1. 代理改掉了编码
2. 某些浏览器仅设置 html 还不够，可能还需要在css顶部设置 @charset=utf8

解决方案：伪元素里 content 都用 unicode 替换掉好了，以绝后患

用 escape 或编码转换工具 ，转后去掉 u \u6211 => \6211

字体图标设置背景色，○ 有毛边

移动端处理字体时有毛边

1. clip-path circle(50%); 不行，还是有会一些毛边
2. background radial-gradient

background: radial-gradient(#fff, #fff 60%, transparent 61%);

https://developer.mozilla.org/zh-CN/docs/Web/CSS/radial-gradient

获取滚动高度

export const getScrollTop = () => {
  // android webview 中要用后者
  return document.documentElement.scrollTop || document.body.scrollTop;
};