不同的字体大小 - Chrome 与 Firefox

Posted 2023-03-06

【中文标题】不同的字体大小 - Chrome 与 Firefox

【英文标题】：Different font size - Chrome vs Firefox

【发布时间】：2011-09-29 19:12:26

【问题描述】：

我正在做一个项目，我发现了一些奇怪的东西。字体在 chrome 中看起来与 firefox 不同。您可以在下图中看得更清楚：

如您所见，在“帮助”和边距之间，chrome 中为 33px，而 firefox 中为 57px。有人对此有任何想法吗？

PS：字体大小：14px；字体系列：Arial、Verdana、Sans-serif；我使用css重置。

【问题讨论】：

我看不出字体大小有什么不同。只有填充。

你的字体大小是一样的！我强烈建议您编辑您的 OP 标题，以更准确地描述 实际 填充/边距/位置不一致的问题。

【参考方案1】：

用

开始你的 css 文档

*  
      padding:0px;
      margin:0px;

【讨论】：

没有看到他的代码，我会犹豫推荐任何东西，更不用说对填充和边距进行全面重置了。它可能完全无效或完全被覆盖。

我使用github.com/iamntz/base-project（已重置css）所以你写的已经完成了。

【参考方案2】：

我假设您使用的是 Firefox 4 或更低版本。如果你是，那么我相信你的问题出在 Firefox 4 及以下版本的渲染引擎中，它刚刚在 Firefox 5 中得到纠正。

基本上 Firefox 4 及以下版本对所有其他浏览器的 CSS 单元测量值不同，由于过去这种不一致的行为，我不得不放弃字体。

在 Mozilla Firefox tech specs page for version 5 的“一致 CSS 单元”下查看

希望对你有帮助

【讨论】：

一个像素仍然是一个像素。你在说什么？他的字体看起来一样......一切都只是向左移动，包括他的一些非文本元素。

@Sparky672 从物理上讲，像素就是一个像素，但像素大小可能会根据生成内容的引擎而有所不同，因为任何优秀的设计师都应该意识到这一点。我提到的字体方面是一个例子，而不是全部和全部。看看 Mozilla 参考资料，它虽小但很清楚。

我尝试使用 em,px,pt 但没有任何好的结果。也许这将有助于更好地了解我的问题imageshack.us/photo/my-images/594/unled203.png

@Ryan：任何优秀的设计师都知道，“像素”没有任何物理尺寸，直到我们开始讨论在给定屏幕分辨率下通过显示器渲染的像素数量。在给定的显示器上，Firefox 中的一个像素与任何其他浏览器中的一个像素的“大小”完全相同......句号。

@Sparky672 你被误导了我的朋友。如果一个像素有一个物理尺寸或者它不存在，这就像说空气没有物理或可测量的值，这是不正确的。像素尺寸的比率最初由显示像素的硬件设置，像素本身的大小由像素的生成定义。如前所述，只需阅读 Mozilla 提供的信息即可。