當一個奇數寬度的div被拆分爲50％/ 50％時剩下的1px會發生什麼？

比方說，我想作一個背景div#wrapper做到一半是藍色，一半是紅色的使用兩個div與width:50%，就像這樣：當一個奇數寬度的div被拆分爲50％/ 50％時剩下的1px會發生什麼？

HTML：

<div id="wrapper"> 
    <div id="leftSide"></div> 
    <div id="rightSide"></div> 
</div>

CSS：

body, html, #wrapper { 
    width: 100%; 
    height: 100%; 
} 

#wrapper { 
    background: white; 
} 

#leftSide, #rightSide { 
    width: 50%; 
    height: 100%; 
} 

#leftSide { 
    float: left; 
    background: blue; 
} 

#rightSide { 
    float: right; 
    background: red; 
}

Here is a fiddle for the above example.

這將在理論上解決任務。但是，如果包裝的寬度包含奇數個像素，剩餘的1px會發生什麼情況？

例如，如果包裝寬度更改爲101px，那麼#leftSide應爲50px寬，而#rightSide應爲50px寬，可能會在中間留下1px垂直白線。

瀏覽器通常如何渲染？其中一方會吸收剩餘的1px嗎？而且，如果是這樣，什麼是最好的純CSS方法來解決這個問題？我的第一個傾向是將包裝的背景設置爲紅色或藍色，但還有其他方法嗎？

來源

2012-07-26 JSW189

我會認爲右側會獲得一個像素，或者右側的最後一個沒有任何背景色。 – Blieque 2012-07-26 16:05:28

諺語硬幣翻轉。這就是瀏覽器出現1px轉換的原因，並且在不同的瀏覽器中出現不同。沒有「正常」。 – ScottS 2012-07-26 16:05:39

你試過了嗎？ – JJJ 2012-07-26 16:10:30