移動端兼容問題總結(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, 經過設置數值來修復。

有誤歡迎聯繫: zsirfs@zswfx.com