計算百分比寬度時，safari中是否存在錯誤？

下面是代碼：計算百分比寬度時，safari中是否存在錯誤？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<head> 
    <title></title> 
    <style type="text/css"> 
     * { margin:0px; padding: 0px;} 

     #greenbox { 
      border: 5px solid green; 
      margin: 20px; 
     } 

     #redbox { 
      background-color: red; 
      float:left; 
      width: 50%; 

     } 

     #bluebox { 
      background-color: blue; 
      width: 50%; 
      overflow: auto; 

     } 
    </style> 
</head> 
<body> 

    <div id="greenbox"> 
     <div id="redbox"> 
     red box 
     </div> 
     <div id="bluebox"> 
     blue box 
     </div> 
    </div> 
</body>

的代碼會顯示一個鑲上綠色的框，紅色框，框中的綠色方框內的藍色，都與背景顏色。

雖然這是一個問題：將藍框和紅框的寬度分別設置爲50％，理論上應該包含綠框的全部內容區域。但是，綠色框的最右側有一個空的1 px空格！

這是safari 5.0.3中的錯誤（我無法安裝任何其他瀏覽器來測試）？或者在我的代碼？或者在CSS中？有沒有簡單的方法來解決它？

來源

2011-03-20 SteveX

這顯然也發生在高處。我很想找到解決方案。 – 2015-06-24 13:35:29

它不只是Safari。 John Resign在他的博客中談到子像素寬度：http://ejohn.org/blog/sub-pixel-problems-in-css/

這個問題還取決於您的容器的實際寬度。

還有一個關於SO的話題，談論此事，似乎無法找到它。

來源

2011-03-20 13:12:34 JohnP

AHH！所以這就像一個四捨五入的錯誤，我猜。謝謝。稍微移動窗口左/右似乎'填補了空白'。 – SteveX 2011-03-20 13:24:16

是的，取決於容器的寬度，你可以得到一些奇怪的結果 – JohnP 2011-03-20 13:25:05

是否有修復/解決此bug的解決方法？例如使用calc（）在所有瀏覽器中實現相同舍入？ – lukasziegler 2016-10-12 15:49:59

計算百分比寬度時，safari中是否存在錯誤？

回答

相關問題