Chrome中的字体会变大吗？打破绝对定位

Question

Chrome渲染字体更大，为什么？

我们的网站很大程度上依赖于绝对位置而且铬只是不好看。 IE＆amp; 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：

铬：

Answer 1

可悲的是，所有浏览器都以不同的方式呈现字体，在字符宽度，间距，重量，平滑等方面略有不同。如果您需要文本来准确填充容器的宽度，您可以尝试这样的事情：

http://fittextjs.com/

Answer 2

没有解决它 - 浏览器和操作系统全部render fonts a little differently。您可以使用letter-spacing: -.01em;这样的负字母间距来捏造它，或者可以将white-space: no-wrap;添加到H1。

Answer 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。