2

在一个大型测试套件中,我正在测试如何详细解释布局,并发现 Mac 和 Linux 上的 Google Chrome 以不同方式计算文本区域的大小,请参阅此 jsfiddle:

http://jsfiddle.net/AndrasMadsen/Cspcf/

为了您的信息,我可以告诉 mac 将<span>框呈现为:

{
  "top": 8,
  "bottom": 25,
  "left": 8,
  "right": 84,
  "width": 76,
  "height": 17
}

而 Linux 将其呈现为:

{
  "top": 8,
  "bottom": 26,
  "left": 8,
  "right": 84,
  "width": 76,
  "height": 18
}

我当然可以使测试更加灵活,但是由于稍后将由计算机分析结果,因此使盒子大小保持一致非常重要。

还值得注意的是,该解决方案只需要在最新版本的 Google Chrome 上运行,如果更改字体系列可以解决问题,那就没问题了。但我想避免添加一堆自定义 CSS 属性以接近现实世界,我无法控制 CSS。然而,在这个测试套件中,我控制着 CSS,所以它是可以接受的。

4

1 回答 1

0

当您不指定line-height时,浏览器将应用它们的默认值,这应该取决于字体。设置line-height并不能保证所有浏览器对行框使用相同的高度,但这是一个开始。

于 2013-03-04T21:33:14.690 回答