移动端兼容问题总结(4)

欢迎访问我的博客: https://zswfx.com

ios 惯性滚动时候多个滚动方向会出现滚动颤抖现象

原因是因为当你在一个方向滚动的时候，在该滚动容器内另一个方向也开始滚动，这个时候就会出现容器滚动。

解决办法： 单个滚动容器内不要放置多个可滚动区域。

有争议的解决方式，待后续完善。

使用 user-select: none; ios下无法输入

caniuse user-select

布局 80% + 20% !== 100% 排列规则兼容

蓝条 80%, 红条 20%, 但是并没有达到100% 充满整个宽度

http://taobaofed.org/blog/201...

推荐看一下淘宝FED前端对元素排列测试说明:

这里需要利用微元素，占据着不足一像素的位置:

&::after {
    content: '';
    position: absolute;
    right: -2px;
    top: 0;
    width: 2px;
    background-color: currentColor;
    height: 100%;
}

margin 穿透问题(不限于移动端)

描述: 在移动端中若一个元素设置: margin-top: 40px, 则看到效果，若父级就是普通的div，则此时，父级表现的情况也会下移40px

这里表现称之为 外边距坍塌

外边距坍塌： 块级元素的上外边距和下外边距有时候会合并或者折叠变成一个外边距，取大小其中最大值，称之为外边距折叠或者合并。

特殊情况： 浮动元素和绝对定位元素外边距不会合并

外边距坍塌有三种基本情况:

• 相邻元素之间
• 父元素与第一个或者最后一个子元素之间
• 空的块级元素

解决办法： 使用padding代替margin， 在兄弟元素之间使用margin，父子元素之间使用margin

背景图片问题

如图所示， 右边图标是背景图片，设置：

background-position: right center;

然后就这样了，修复如下：

background-position: 99.9% center;

不再直接使用 right, 通过设置数值来修复。

有误欢迎联系: [email protected]