Chrome「cm」問題

我注意到Chrome瀏覽器中的元素大小有問題。
我已經寫了簡單的代碼：Chrome「cm」問題

<html> 
<body> 
<table border="1px"> 
<tbody> 
<tr> 
    <td> 
     <span style="display: inline-block; width: 5cm">TEXT</span> 
     <span style="display: inline-block; width: 5cm">TEXT</span> 
     <span style="display: inline-block; width: 5cm">TEXT</span> 
     <span style="display: inline-block; width: 5cm">TEXT</span> 
    </td> 
</tr> 
</tbody> 
</table> 
</body> 
</html>

我期望有4個跨度垂直地重複，每次5釐米。它適用於IE，火狐等：
IE - Works fine

而Chrome卻存在着以下問題：
Chrome - Doesn't work

在IE中，跨距189px寬每運輸署已772px。
在Chrome中，跨度寬度爲189px，td爲771px。

這是Chrome的問題嗎？爲什麼我的td元素不適合其內容？對於我來說，留住這些跨度元素（我不能用div來替換它們）並設置寬度（釐米）非常重要。當我刪除表格邊框時問題仍然存在。

來源

2012-11-13 Lierizou

''？ – Doorknob

我對td元素的內容一無所知 - 可以有一個span元素，也可以有很多元素。據我所知，當td元素沒有指定寬度屬性時，它應該適合其內容，這就是我想要實現的。 – Lierizou

CSS cm單位是不可靠的，如果你想要一個固定數量的像素。他們也不太可能在屏幕上實際測量5釐米。 cm單位主要用於印刷樣式。是的，它可以在屏幕上使用，但不要指望它有任何準確性。

5cm框呈現爲189像素的事實告訴我們，cm不是整數像素。僅這一點就足以告訴你，使用cm單位不太可能獲得精確的像素級跨瀏覽器渲染。

這只是不會發生。如果你想像素完美的準確性，使用px單位。

你說在你不能改變單位的問題。如果可能的話，你真的應該重新考慮，因爲它只會一直給你提供這些問題。

如果你真的無法改變他們，那麼一個辦法，我能想到的解決您的問題不改變的單位是給<td>元素的white-space:nowrap風格。無論瀏覽器是否認爲他們應該在那裏，這應該強制所有跨度到同一行。它應該爲你做詭計。但它不能解決潛在的問題，如果您在屏幕上繼續使用cm單位，它可能會以其他方式回來。

至於究竟是什麼導致毛刺首先，我猜測鉻處理的浮點像素值略有不同，並且它有一個舍入誤差時，它添加跨度的像素寬度工作出多寬使得<td>。如果是這種情況，那麼這聽起來像是Chrome中的一個錯誤，你可以向他們報告，但鑑於上面所說的一切，我看不到它們成爲高優先級問題。

來源

2012-11-13 13:07:54 SDC

謝謝你的回答。它解釋了很多，並使問題清楚。現在很明顯，cm不是像素的整數。其實，我已經多次檢查過這個問題，並且幾天之內無法應付這個問題。這總是不正確的。我的朋友也檢查了它，令人驚訝的是，它的工作。經過簡短的調查後，我們假設問題已在新版Chrome瀏覽器中得到解決 - 上述代碼現在也可以在我的計算機上正常工作（我的屏幕分辨率沒有變化等）。我在調查的時候有沒有巧合？ ;） – Lierizou

Chrome「cm」問題

回答

相關問題