国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

瀏覽器對css小數點的處理

NikoManiac / 2644人閱讀

摘要：但是通過分析驗證了問題所在，之后遇到這種情況的時候便有了解決辦法合理設置百分比，使其計算結果小數點，進而四舍五入之后寬度大于實際渲染寬度

近期在開發的時候遇到一個奇怪的問題，如下圖(ios系統，android暫未發現)，第一個和第三個子元素中的角標與父元素始終有一條縫隙，但是第二個沒有，因為第一次遇到，沒有意識到是小數點的問題，然后從頭到尾重新看了相關的樣式，布局，設置都沒有問題，但是那條縫又明明確確的在那兒

核心代碼：

ul {
    display: flex;
    justify-content: space-between;
    padding: 15px;
    li {
        position: relative;
        width: 32%;
        ...
        span {
            position: absolute;
            right: 0;
            top: 0;
            ...
        }
    }
}

秉著實踐出結果，開始調試（iphone6），所有布局相關的樣式一個個改值，最后在同事的幫助下，發現把width改為31.5%之后就可以了，此時意識到與css小數點有關系

于是針對這個來分析（下面分析僅僅作為參考，瀏覽器內核到底怎么工作的，safari和chrome又分別做了什么暫不清楚）：

iphone6寬度為375px，ul寬度為345px，所以32%和31.5分別是110.4和108.675，果然四舍五入之后，前者變小后者變大。網上查找之后說是，瀏覽器會對css小數點有不同的處理規則，ie向下取整，chrome，safari等四舍五入，參考這兩篇文章css布局單元 ，css小數像素問題

大致了解為什么會出現這種情況之后，針對自己這個問題，從深層次的角度分析一下原因，見上述參考鏈接，webkit內核在渲染元素時，真實渲染區域是固定不變的，但是在文檔流中的空間大小是計算出來的，所以直接影響到了下一個元素，出現了第二個元素與第一個元素表現形式不同的情況。如下圖是webkit計算方式：

按照上面計算方式計算寬度為32%時，三個元素的結果如下：

第一個li，x = 15，width = round(15+110.4) - round(15) = 110


第二個li，x = 125.4，width = round(125.4+110.4) - round(125.4) = 111


第三個li，x = 235.8，width = round(235.8+110.4) - round(235.8) = 110

我們可以發現，第一個li，實際渲染區域寬度為110.4，但是文檔流中寬度為110，所以子元素可活動區域為110，那0.4便是那條空隙
第二個li，實際渲染區域也是110.4，但是文檔流中寬度為111，同理第三個計算為110，這便也解釋了為什么一三表現形式一樣

同理，寬度為31.5時，width分別為：109，109，109，實際渲染寬度為108.675

經過測試驗證，ios系統內，safari和應用內webview效果與分析一致，但是通過dom獲取元素width時，與上面計算結果不一致，全部都是四舍五入之后的結果，這一點沒有搞清楚。但是通過分析驗證了問題所在，之后遇到這種情況的時候便有了解決辦法：


合理設置百分比，使其計算結果小數點>=5，進而四舍五入之后寬度大于實際渲染寬度

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112958.html

相關文章

  • css值

    摘要：表示用戶代理的默認值。但在某些情況下這個值非常有用。這是結合形成文檔后所得到的值。開發者指定值種用戶代理默認值不可更改具有中劃線的值表示被層疊規則覆蓋即被權重大的給覆蓋了樣式。 CSS值的來源 首先,我們知道CSS雖然語法簡單，但也不是瞎寫的，其屬性和值都是官方定義好了的,確切的說是瀏覽器廠商定義好的。 這些給定的值無外乎來源以下情況： inherit 表示從祖先元素繼承得到值。每個...

    X1nFLY 評論0 收藏0

  • 我的第一次移動端頁面制作 — 總結與思考

    摘要：最近被分配到移動端開發組，支持某活動的頁面頁面制作。這算是我第一次真正接觸移動端頁面制作，下面就談談個人總結和思考。這無疑會增強程序的可維護性。規范正如上面討論的，一個頁面由多個組成。的兼容性在安卓及以下是不支持的。 最近被分配到移動端開發組，支持某活動的頁面頁面制作。這算是我第一次真正接觸移動端頁面制作，下面就談談個人總結和思考。 整體流程 開會大體講解、討論與排期 -> 交互設計 ...

    voyagelab 評論0 收藏0

  • 我的第一次移動端頁面制作 — 總結與思考

    摘要：最近被分配到移動端開發組，支持某活動的頁面頁面制作。這算是我第一次真正接觸移動端頁面制作，下面就談談個人總結和思考。這無疑會增強程序的可維護性。規范正如上面討論的，一個頁面由多個組成。的兼容性在安卓及以下是不支持的。 最近被分配到移動端開發組，支持某活動的頁面頁面制作。這算是我第一次真正接觸移動端頁面制作，下面就談談個人總結和思考。 整體流程 開會大體講解、討論與排期 -> 交互設計 ...

    Cheng_Gang 評論0 收藏0

  • 移動端h5頁面適配

    摘要：一直對頁面充滿崇敬揣著忐忑的心開始了我的之旅。但實際情況卻并非如此理由如上但在移動設備上，必須弄明白這點。其他品牌的移動設備也是這個道理。 一直對h5頁面充滿崇敬,揣著忐忑的心開始了我的h5之旅。才發現直接照抄網上的方案是很容易,但是想真的了解內部的原理,這就給我了一個下馬威了.通過在網上各種找資料,才將各種概念以及原理了解清楚.故寫下這篇文章用于積累知識,如有問題,歡迎指正! 在開始...

    張率功 評論0 收藏0

發表評論

0條評論

NikoManiac

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<