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

Question

我正在网页上创建一个特定功能，要求CSS溢出在Chrome和Firefox之间保持一致（理想情况下也是IE）。当使用常见的网络字体（如Arial）时没有问题，但是一旦我开始使用谷歌网络字体，我看到了CSS溢出的差异。

这是一个演示：jsfiddle demo 这是一个带有一些示例文本的固定宽度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）上运行jsfiddle demo的屏幕截图。使用“Arial”，两个浏览器都没有溢出。

2）在Firefox（L）和Chrome（R）上运行jsfiddle demo的屏幕截图。使用“Playball”，Firefox中的 IS溢出（参见滚动条），但不是Chrome

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

编辑： 根据Per Kamal在下面的评论，我为两个div添加了行高，实际上滚动条外观现在已经存在。然而，另一个问题是在第三行，“跳过”适合Chrome，但只有“跳过”适合FF。有任何想法吗？ Latest fiddle

Answer 1

尝试更改线条高度，因为两个屏幕截图对我来说，在线条之间的间距看起来有点不同。 编辑：您还应该尝试调整字母间距。

Answer 2

我找到了让你的溢出更加一致的方法。即使你指定了溢出：滚动，滚动也没有任何效果，除非有理由，所以我们必须手动强制它。

我在这里找到了部分解决方案：How can I prevent scroll bars from being hidden for OS X trackpad users in WebKit/Blink?

另外 - 我创建了一个带有更新样式的fiddle。所以现在即使盒子太小而不能让滚动条显示它仍占用盒子中的空间以便一致地包裹你的线条。

Answer 3

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

字母间距和行高，问题总是发生。

Answer 4

尝试在css中定义行高，字母间距和字间距。