溢出：Firefox与Chrome（CSS）上隐藏的外观不同

Question

我正在创建以下2in x 1in条形码（必须是这些尺寸）。如果名称太长，我希望它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图形引擎也是如此。您无法强制浏览器以相同方式呈现文本。

sub pixel problems in css

您可以按http://developer.yahoo.com/yui/reset/

重置您的CSS

此处提供更多信息Fonts looks different in Firefox and Chrome