Fonts 谷歌字体css溢出行为chrome vs firefox

我在一个网页上创建了一个特定的函数，它要求CSS溢出在Chrome和Firefox（最好是IE）之间保持一致。当使用诸如Arial之类的常用web字体时，没有问题，但是一旦我开始使用google web字体，我就会看到CSS溢出的差异

下面是一个演示： 这是一个带有一些示例文本的固定宽度div。“Playball”是一种谷歌字体

#box {
   height: 160px;
   width: 200px;
   border: black 1px solid;    
   font-size: 2em;
   font-family: 'Playball', cursive;
   overflow-x: hidden;
   overflow-y: scroll;   
}

1） 在Firefox（L）和Chrome（R）上运行JSFIDLE演示的屏幕截图。使用“Arial”，两种浏览器中都没有溢出。

2） 在Firefox（L）和Chrome（R）上运行JSFIDLE演示的屏幕截图。使用“Playball”，Firefox中有溢出-y（参见滚动条），但没有Chrome

如何使Chrome和Firefox之间的CSS溢出保持一致

编辑： 根据Kamal在下面的评论，我在两个div中都添加了一个行高，而且现在滚动条的外观确实是一致的。然而，另一个问题是在第三行，在Chrome中“跳过”了，但在FF中只“跳过”了。有什么想法吗

---

尝试更改行高，因为在我看来，两个屏幕截图仅在行间距上略有不同。

---

编辑：您还应该尝试调整字母间距。

我找到了一种使溢出更一致的方法。意识到即使您指定overflow:scroll，滚动也不会生效，除非有原因，所以我们必须手动强制它

我在这里找到了部分解决方案：

---

另外，我创建了一个带有更新样式的。因此，现在，即使框太小，滚动条无法显示，它仍然会占用框中的空间，以便一致地换行。

我认为这对于使用不同渲染引擎的每个浏览器来说都是无法解决的，我指的是像滚动条或复选框这样的浏览器元素（特别是在Windows中，您可以在XP和7上进行测试，也可以在OSX和Linux上进行测试）

---

字母间距和行距，总是会出现问题。

尝试在css中定义行距、字母间距和单词间距。

很可能您需要这样做。谢谢，请查看我的编辑以了解后续问题。（如果我可以奖励部分赏金点数，我会这样做。）@fortuneRice-部分赏金是不可能的；但是，您可以“接受”一个答案带有绿色复选框，并将奖金奖励给另一个人。因此，一个人将获得+50，另一个人将获得+15。感谢您的研究。我正在寻找一种方法，使CSS溢出保持一致，而不是使滚动条保持一致。对于我的特殊需要，滚动条只是CSS溢出的视觉指示e、 它们在Chrome18.0.1025.151和Firefox11.0（Mac OS X 10.7.3）中看起来完全一样。这里也一样。很可能是windows字体渲染问题。