字体在 Chrome 中渲染得更大？打破绝对定位答案

【问题标题】：Font renders bigger in Chrome? Breaks absolute positioning字体在 Chrome 中渲染得更大？打破绝对定位
【发布时间】：2014-05-21 07:28:15
【问题描述】：

Chrome 让字体变大，为什么？

我们的网站非常依赖绝对位置，而 chrome 的播放效果并不好。 IE & FF 渲染了这个位置。

<div id="box"></div>
<h1 id="title">This is a title</h1>

#title {
    position: absolute;
    height: 120px;
    left: 0;
    top: 0;
    width: 195px;
    z-index:1000;
    font-family:"Arial";
}

#box {
    position: absolute;
    background-color: #CCCCCC;
    height: 100px;
    left: 0;
    top: 0;
    width: 193px;
}

见：http://jsfiddle.net/7yeLz/

试过一些reset.css，还是不行。还有其他解决方法吗？

IE/FF：

铬：

【问题讨论】：

对我来说看起来不错。似乎没有破坏任何东西。
nowrap 有帮助吗？如果问题在于它的包装不是它的整体尺寸
试试normalize.css，它有一个修复h1元素的样式。虽然 Chrom 使用 :before 伪元素应用了边距，所以它可能无法修复它。

标签： css google-chrome cross-browser

【解决方案1】：

遗憾的是，所有浏览器都以不同的方式呈现字体，在字符宽度、间距、粗细、平滑等方面略有不同。如果您需要文本完全填充容器的宽度，您可以尝试以下操作：

http://fittextjs.com/

【讨论】：

【解决方案2】：

没有办法绕过它 - 浏览器和操作系统都是 render fonts a little differently。您可以使用负的字母间距（例如 letter-spacing: -.01em;）来伪造它，或者您可以将 white-space: no-wrap; 添加到 H1。

【讨论】：

【解决方案3】：

这是由 Chrome 的默认 <h1> 样式引起的，查看 Chrome 网络控制台中的样式，他们使用 -webkit-margin-before:0.67em; 样式，您可以像这样修复：

h1 {
  -webkit-margin-before:0em ;    
  -webkit-margin-after:0em ;    
}

解决方案：JSFiddle

更新：

由于 FF 将文本呈现在两行而不是一行上，尽管您试图实现这种外观（抱歉，我也应该测试 IE 以确保。）

详细查看它：修复方法是将 chrome 的 word-spacing 更改为 -2px（这也为我修复了 FF，但它当然已经适用于你了）。虽然从设计的角度来看，简单地将额外的 5px 添加到宽度可能更容易，但为最坏情况的浏览器设计以防止在 Chrome 中换行，这比在 FF 和 IE 中的额外空间更糟糕。

【讨论】：

试过了，结果和我刚刚在更新中添加的截图一样。
@Henry，我的 FF (v29.0.1) 与 Chrome 屏幕截图中显示的结果相同，但 IE 正确显示（全部在一行上）