Chrome中奇怪的邊框寬度行爲 - 浮點邊框寬度？

某些液體設計，尤其是那些涉及％寬度iFrames的液體設計，似乎會在Chrome中導致一些奇怪的舍入類型錯誤（我有版本21）。Chrome中奇怪的邊框寬度行爲 - 浮點邊框寬度？

This Fiddle證明了這個問題。將邊框設置爲一個整數像素值，當您請求時返回的值是比預期值略小的浮點數。

嘗試exact same code in CodePen不會產生相同的結果，可能是因爲圍繞它的iFrame和其他樣式的設置方式不同。

（我也看到了這種行爲的基本width和height屬性，雖然我無法複製中的jsfiddle的問題的一部分。）

這似乎並沒有在Firefox中的問題或者在IE8中。

關於什麼，具體是什麼導致這種奇怪的行爲，以及我如何解決它以獲得真正的價值觀？

情節變厚。爲了試圖解決這個問題，我發現超過10像素的值看起來不受此問題的影響。

此外，根據@ GionaF的評論，它似乎在Chrome 22

其實，我得到3px（鉻22） – Giona

貝。感謝您看@GionaF。不幸的是，我目前沒有升級的選擇... –

最近我遇到了Chrome的一個問題：試圖以50％的寬度定位奇數寬度塊（49px），我得到了一些不同的位置+/- 在偶數和奇數屏幕寬度上有1個像素。我解決了這個問題，增加了1px的填充，以確保塊是平坦的。希望這個技巧能幫助你。 –

要重現您的問題，我必須更改Chrome的縮放級別。將縮放級別更改回100％可以修復它。它似乎是一個錯誤，計算出的邊框寬度總是小於定義的邊框寬度，放大或縮小！

當縮放級別爲110％時，您的10像素邊框的值爲10，但在125％時它與您的3像素邊框具有相同的問題。

編輯：firefox有同樣的行爲！

2013-05-24 16:29:44 Willem

這是重現問題的最可靠方法。當我最初遇到問題時，我認爲我沒有設置縮放級別，但很高興知道它可以通過縮放重新創建。 –

在我的情況下，我的縮放設置爲90％（偶爾使用滾動按鈕和Ctrl鍵時偶爾會發生這種情況），因此我的1px邊框計算爲1.11px或比其應該寬度大10％是。 – redOctober13

正常工作，我不能在Chrome中重現此問題目前，但這種行爲很可能與Subpixel Rendering做。本質上，Webkit將使用整數運算來進行計算，以避免浮點不精確。

目前看來，border不使用子像素渲染，這可以解釋爲什麼這個問題在新的Chrome版本中不可見。

2013-05-19 14:35:13

我投了這個答案，因爲我認爲它可能是正確的，它與子像素渲染有關，但我喜歡威廉姆的回答讓我至少重新創建了這個行爲。我猜測在我使用的Chrome版本中存在一個子像素渲染錯誤，甚至可能與縮放有關，但它可能太過分了。感謝您花時間回答！ –

設置框大小爲所有元素的邊界框有幫助嗎？這將改變框模型的計算方式，邊框和填充不會影響寬度。

*, 
*:before, 
*:after { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; }

2013-05-24 00:15:35 Alex

我也在邊界input s和其他元素的問題。花了一個小時的時間後，我發現了意想不到的原因導致了這個問題。引導CSS使用normalize css和下面的代碼是造成這種問題：

hr { 
    -webkit-box-sizing: content-box; 
    -moz-box-sizing: content-box; 
    box-sizing: content-box; 
}

爲了解決這個問題，我重寫CSS在我的style.css：

hr { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
}

的hr規則真的不與相關input s但它工作。這真是意想不到的行爲，試試吧，並且會起作用。

2017-11-03 06:43:28

回答