溢出：隐藏在 Firefox 和 Chrome (CSS) 上看起来不同答案

【问题标题】：overflow:hidden looks different on Firefox vs Chrome (CSS)溢出：隐藏在 Firefox 和 Chrome (CSS) 上看起来不同
【发布时间】：2014-06-03 03:20:03
【问题描述】：

我正在创建以下 2 英寸 x 1 英寸条形码（必须是这些尺寸）。如果名称太长，我希望它是overflow:hidden。这在 Firefox 中效果很好，但在 Chrome 中却不行（见截图）。我猜它与我的 CSS 有关。我还验证了两个浏览器都处于默认缩放状态。

火狐：

铬：

工作演示：

正如您在 Chrome 中看到的，您可以看到底部的部分文字没有完全隐藏。

【问题讨论】：

【解决方案1】：

这与字体大小的四舍五入有关。

使用整数字体大小，它在两个浏览器中看起来都一样。

例如：font-size: 13px;

编辑：我还建议使用像素作为尺寸，使用英寸可能在浏览器之间有不同的显示（我没有发现任何差异，但我更喜欢在像素环境中使用像素）。

【讨论】：

【解决方案2】：

Chrome 使用 WebKit 渲染引擎。 Firefox 使用 Gecko 引擎。两者解释和显示类型略有不同，IE9+ 和 Opera 中使用的 DirectX 和 Vega 图形引擎也是如此。您不能强制浏览器以相同的方式呈现文本。

【讨论】：