Chrome錯誤地將像素呈現爲分數

Question

編輯：已解決。而不是將縮放重置爲100％，「查看<實際大小」解決了該問題。

我一直有一個Chrome渲染div分數的問題，而不是完全按照指定的數字。

例如：

HTML

<div class='tile'>foo</div> 

CSS

.tile { 
    background-color: #CCCCCC; 
    border-width: 2px; 
    border-style: outset; 
    display: table; 
    float: left; 
} 

而不是被呈現爲2px的，邊界寬度是 「1.8181817531585693px」 既從Chrome開發人員工具推斷> Elements>計算並使用jQuery .css函數的調試器。

需要注意的是，只有當它在FTP上加載時，纔會發生這種情況，而不是在本地加載。在Firefox或Safari中也不會發生此問題。任何有關Chrome正在做什麼的想法或解釋，或者解決方案將非常感謝。謝謝！

Answer 1

簡短的回答是，他們正在處理內部爲二進制的實數，並且事情必須快速完成。

因此，一些數值轉角可能會被削減，通常對於普通的網頁查看器來說並不明顯，也就是說，如果頁面設計得不明顯。

去圖，我知道，你會認爲瀏覽器會更準確，但我發現，即使對我的css最謹慎和細緻的控制，似乎有舍入錯誤，破壞小細節時顯示。

首先，我建議您使用em而不是px。我知道你可能不得不重新開始你的CSS，但我發現它更可靠，屏幕到屏幕。記住現代頁面不是基於像素。它們是可以放大和縮小的動態野獸，並且變得更窄並且仍然必須輸出合理的東西。

此外，我會建議重新思考你如何佈置你的頁面，所以這些小細節不是問題。在木工中，熟練的技術人員知道如何用模製品隱藏粗糙的邊緣。

我有一個非常準確的網頁，我用它來生成一個特殊的印刷傳單。迫使html和css變成他們不想做的事情是一種極大的痛苦，這是準確的。

另外，我可以在5個主要瀏覽器上測試我的製作網站，在彼此之上進行測試，因此當我在不同瀏覽器之間進行切換時，可以看到很小的差異。他們都以各種方式彼此相距一小段距離，實在沒有辦法讓他們準確。