亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

瀏覽器對(duì)css小數(shù)點(diǎn)的處理

NikoManiac / 2729人閱讀

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

近期在開發(fā)的時(shí)候遇到一個(gè)奇怪的問題，如下圖(ios系統(tǒng)，android暫未發(fā)現(xiàn))，第一個(gè)和第三個(gè)子元素中的角標(biāo)與父元素始終有一條縫隙，但是第二個(gè)沒有，因?yàn)榈谝淮斡龅剑瑳]有意識(shí)到是小數(shù)點(diǎn)的問題，然后從頭到尾重新看了相關(guān)的樣式，布局，設(shè)置都沒有問題，但是那條縫又明明確確的在那兒

核心代碼：

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

秉著實(shí)踐出結(jié)果，開始調(diào)試（iphone6），所有布局相關(guān)的樣式一個(gè)個(gè)改值，最后在同事的幫助下，發(fā)現(xiàn)把width改為31.5%之后就可以了，此時(shí)意識(shí)到與css小數(shù)點(diǎn)有關(guān)系

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

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

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

按照上面計(jì)算方式計(jì)算寬度為32%時(shí)，三個(gè)元素的結(jié)果如下：

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


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


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

我們可以發(fā)現(xiàn)，第一個(gè)li，實(shí)際渲染區(qū)域?qū)挾葹?10.4，但是文檔流中寬度為110，所以子元素可活動(dòng)區(qū)域?yàn)?10，那0.4便是那條空隙
第二個(gè)li，實(shí)際渲染區(qū)域也是110.4，但是文檔流中寬度為111，同理第三個(gè)計(jì)算為110，這便也解釋了為什么一三表現(xiàn)形式一樣

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

經(jīng)過測(cè)試驗(yàn)證，ios系統(tǒng)內(nèi)，safari和應(yīng)用內(nèi)webview效果與分析一致，但是通過dom獲取元素width時(shí)，與上面計(jì)算結(jié)果不一致，全部都是四舍五入之后的結(jié)果，這一點(diǎn)沒有搞清楚。但是通過分析驗(yàn)證了問題所在，之后遇到這種情況的時(shí)候便有了解決辦法：


合理設(shè)置百分比，使其計(jì)算結(jié)果小數(shù)點(diǎn)>=5，進(jìn)而四舍五入之后寬度大于實(shí)際渲染寬度

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/112958.html

相關(guān)文章

  • css值

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

    X1nFLY 評(píng)論0 收藏0

  • 我的第一次移動(dòng)端頁面制作 — 總結(jié)與思考

    摘要：最近被分配到移動(dòng)端開發(fā)組，支持某活動(dòng)的頁面頁面制作。這算是我第一次真正接觸移動(dòng)端頁面制作，下面就談?wù)剛€(gè)人總結(jié)和思考。這無疑會(huì)增強(qiáng)程序的可維護(hù)性。規(guī)范正如上面討論的，一個(gè)頁面由多個(gè)組成。的兼容性在安卓及以下是不支持的。 最近被分配到移動(dòng)端開發(fā)組，支持某活動(dòng)的頁面頁面制作。這算是我第一次真正接觸移動(dòng)端頁面制作，下面就談?wù)剛€(gè)人總結(jié)和思考。 整體流程 開會(huì)大體講解、討論與排期 -> 交互設(shè)計(jì) ...

    voyagelab 評(píng)論0 收藏0

  • 我的第一次移動(dòng)端頁面制作 — 總結(jié)與思考

    摘要：最近被分配到移動(dòng)端開發(fā)組，支持某活動(dòng)的頁面頁面制作。這算是我第一次真正接觸移動(dòng)端頁面制作，下面就談?wù)剛€(gè)人總結(jié)和思考。這無疑會(huì)增強(qiáng)程序的可維護(hù)性。規(guī)范正如上面討論的，一個(gè)頁面由多個(gè)組成。的兼容性在安卓及以下是不支持的。 最近被分配到移動(dòng)端開發(fā)組，支持某活動(dòng)的頁面頁面制作。這算是我第一次真正接觸移動(dòng)端頁面制作，下面就談?wù)剛€(gè)人總結(jié)和思考。 整體流程 開會(huì)大體講解、討論與排期 -> 交互設(shè)計(jì) ...

    Cheng_Gang 評(píng)論0 收藏0

  • 移動(dòng)端h5頁面適配

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

    張率功 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<