資訊專欄INFORMATION COLUMN
摘要：但是通過分析驗(yàn)證了問題所在，之后遇到這種情況的時候便有了解決辦法合理設(shè)置百分比，使其計算結(jié)果小數(shù)點(diǎn)，進(jìn)而四舍五入之后寬度大于實(shí)際渲染寬度
近期在開發(fā)的時候遇到一個奇怪的問題，如下圖(ios系統(tǒng)，android暫未發(fā)現(xiàn))，第一個和第三個子元素中的角標(biāo)與父元素始終有一條縫隙，但是第二個沒有，因?yàn)榈谝淮斡龅剑瑳]有意識到是小數(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)的樣式一個個改值，最后在同事的幫助下，發(fā)現(xiàn)把width改為31.5%之后就可以了，此時意識到與css小數(shù)點(diǎn)有關(guān)系
于是針對這個來分析（下面分析僅僅作為參考，瀏覽器內(nèi)核到底怎么工作的，safari和chrome又分別做了什么暫不清楚）：
iphone6寬度為375px，ul寬度為345px，所以32%和31.5分別是110.4和108.675，果然四舍五入之后，前者變小后者變大。網(wǎng)上查找之后說是，瀏覽器會對css小數(shù)點(diǎn)有不同的處理規(guī)則，ie向下取整，chrome，safari等四舍五入，參考這兩篇文章css布局單元 ，css小數(shù)像素問題
大致了解為什么會出現(xiàn)這種情況之后，針對自己這個問題，從深層次的角度分析一下原因，見上述參考鏈接，webkit內(nèi)核在渲染元素時，真實(shí)渲染區(qū)域是固定不變的，但是在文檔流中的空間大小是計算出來的，所以直接影響到了下一個元素，出現(xiàn)了第二個元素與第一個元素表現(xiàn)形式不同的情況。如下圖是webkit計算方式：
按照上面計算方式計算寬度為32%時，三個元素的結(jié)果如下：
第一個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
我們可以發(fā)現(xiàn)，第一個li，實(shí)際渲染區(qū)域?qū)挾葹?10.4，但是文檔流中寬度為110，所以子元素可活動區(qū)域?yàn)?10，那0.4便是那條空隙
第二個li，實(shí)際渲染區(qū)域也是110.4，但是文檔流中寬度為111，同理第三個計算為110，這便也解釋了為什么一三表現(xiàn)形式一樣
同理，寬度為31.5時，width分別為：109，109，109，實(shí)際渲染寬度為108.675
經(jīng)過測試驗(yàn)證，ios系統(tǒng)內(nèi)，safari和應(yīng)用內(nèi)webview效果與分析一致，但是通過dom獲取元素width時，與上面計算結(jié)果不一致，全部都是四舍五入之后的結(jié)果，這一點(diǎn)沒有搞清楚。但是通過分析驗(yàn)證了問題所在，之后遇到這種情況的時候便有了解決辦法：
合理設(shè)置百分比，使其計算結(jié)果小數(shù)點(diǎn)>=5，進(jìn)而四舍五入之后寬度大于實(shí)際渲染寬度
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/112958.html
摘要：最近被分配到移動端開發(fā)組，支持某活動的頁面頁面制作。這算是我第一次真正接觸移動端頁面制作，下面就談?wù)剛€人總結(jié)和思考。這無疑會增強(qiáng)程序的可維護(hù)性。規(guī)范正如上面討論的，一個頁面由多個組成。的兼容性在安卓及以下是不支持的。 最近被分配到移動端開發(fā)組，支持某活動的頁面頁面制作。這算是我第一次真正接觸移動端頁面制作，下面就談?wù)剛€人總結(jié)和思考。 整體流程 開會大體講解、討論與排期 -> 交互設(shè)計 ...
摘要：最近被分配到移動端開發(fā)組，支持某活動的頁面頁面制作。這算是我第一次真正接觸移動端頁面制作，下面就談?wù)剛€人總結(jié)和思考。這無疑會增強(qiáng)程序的可維護(hù)性。規(guī)范正如上面討論的，一個頁面由多個組成。的兼容性在安卓及以下是不支持的。 最近被分配到移動端開發(fā)組，支持某活動的頁面頁面制作。這算是我第一次真正接觸移動端頁面制作，下面就談?wù)剛€人總結(jié)和思考。 整體流程 開會大體講解、討論與排期 -> 交互設(shè)計 ...
閱讀 3369·2019-08-29 16:17
閱讀 2007·2019-08-29 15:31
閱讀 2680·2019-08-29 14:09
閱讀 2583·2019-08-26 13:52
閱讀 772·2019-08-26 12:21
閱讀 2175·2019-08-26 12:08
閱讀 1032·2019-08-23 17:08
閱讀 1961·2019-08-23 16:59
