fonts - 谷歌字体 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 演示的屏幕截图。使用“Arial”，两种浏览器都没有溢出。

2) 在 Firefox (L) 和 Chrome (R) 上运行 jsfiddle 演示的屏幕截图。使用“Playball”时，在 Firefox 中有 overflow-y(见滚动条) 但在 Chrome 中没有

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

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

Answer 1

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