蒙层点击滚动穿透问题
描述: 移动端浮层内部滚动的时候,会导致浮层覆盖的下面内容也会滚动
解决方式:
蒙层出现的时候,给底部被覆盖的滚动容器
position: fixed;
并设置
overflow: hidden
。如果有可能可以可以设置
width: 100vw; height: 100vh
这样,防止滚动穿透
flex布局下文本省略问题
描述: 在flex 布局下,text-overflow 会失效, 无法使用样式让文字自动省略
解决方式:
flex 布局下包裹一层,然后设置父级层
min-width: 0
即可。
2019-08-02 补充:
关于min-width: 0
原因,在于flex布局下,min-width 默认值为 auto, 设置min-width: 0; 让flex布局更合理的表现.
w3c中 《CSS Flexible Box Layout Module》
2分钟学个CSS小技巧 flex 项中子元素文本溢出截断 text-overflow:ellipsis 失效问题 – flexbox 布局中 flex 项的宽度计算原理
移动端1px问题
position: fixed 在ios 抖动问题
描述: 在滚动容器,设置fixed元素的时候,ios下会一直抖动
从滚动容器中移除 fixed 布局的元素,改在外面fixed
rem, em等产生小数像素值在android下问题
描述: 使用相对的单位时候,出现0.989px这样的单位,android下无效
修改为粗字体时候,会导致::after 消失
android 字体无法加粗问题
描述: 给予android webview上 font-family 粗体时候, 字体无法加粗
设置font-weight: bold。在ios上不会生效,在android上时候,字体会变粗。不能设置font-weight: number; 这个也不会生效的。