谷歌字体的CSS溢出行为铬与火狐
我在网页上创建了一个特定的功能，要求CSS和Firefox（以及理想的IE浏览器）之间的CSS溢出保持一致。 当使用常见的Web字体如Arial时没有问题，但是一旦我开始使用Google Web字体，我会发现CSS溢出的差异。
这里有一个演示：jsfiddle演示这是一个固定宽度的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”，在两个浏览器中都没有overflow-y。 
2）在Firefox（L）和Chrome（R）上运行jsfiddle演示的屏幕截图。 使用“Playball”， Firefox中有溢出（请参阅滚动条），但不是Chrome 
如何让Chrome和Firefox之间的CSS溢出保持一致？
编辑：根据下面的Kamal的评论，我已经为两个div添加了一个线条高度，而滚动条的外观的确是一致的。 然而，另一个问题是在第三行，“跳过”适合Chrome，但只有“跳过”适合FF。 有任何想法吗？ 最新的小提琴。
试着改变线条高度，就像两个截图一样，对于我来说，线条之间的间距看起来有点不同。 编辑：你也应该尝试调整字母间距。
我找到了一种让你的溢出更加一致的方法。 即使您指定了overflow：scroll，实现也不会产生任何效果，除非有理由，所以我们必须手动强制它。
我在这里找到了部分解决方案：如何防止WebKit / Blink中的OS X轨迹板用户隐藏滚动条？
另外 - 我创建了一个更新的风格的小提琴。 所以现在，即使盒子太小，滚动条仍然显示仍然占用盒子中的空间，以便始终如一地包裹您的线条。
我认为这对于使用不同渲染引擎的每个浏览器都是不可解决的，我的意思是像滚动条或复选框这样的浏览器元素（特别是在Windows中，您可以在XP和7上测试它，也可以在OSX和Linux中测试）
字母间距和行高，问题总是发生。
链接地址: http://www.djcxy.com/p/66449.html