溢出：隱藏在 Firefox 和 Chrome (CSS) 上看起來不同

Question

我正在創建以下 2 英寸 x 1 英寸條形碼（必須是這些尺寸）。 如果名稱太長，我希望它overflow:hidden 。 這在 Firefox 中效果很好，但在 Chrome 中則不然（見截圖）。 我猜這與我的 CSS 有關系。 我還驗證了兩個瀏覽器都處於默認縮放狀態。

火狐：

鉻合金：

工作演示：

http://blastohosting.com/barcode_overflow/

正如您在 Chrome 中所看到的，您可以看到底部未完全隱藏的部分文字。

Answer 1

這與字體大小的舍入有關。

使用整數字體大小，它在兩個瀏覽器中看起來都一樣。

例如： font-size: 13px;

編輯：我還建議使用像素作為尺寸，使用英寸可能在瀏覽器之間有不同的顯示（我沒有發現任何差異，但我更喜歡在像素環境中使用像素）。

Answer 2

Chrome 使用 WebKit 渲染引擎。 Firefox 使用 Gecko 引擎。 解釋和顯示類型略有不同，IE9+ 和 Opera 中使用的 DirectX 和 Vega 圖形引擎也是如此。 您不能強制瀏覽器以相同的方式呈現文本。

對於css中的子像素問題

您可以通過http://developer.yahoo.com/yui/reset/重置您的 css

此處的更多信息字體在 Firefox 和 Chrome 中看起來不同