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

【问题标题】：google fonts css overflow behaviour chrome vs firefox谷歌字体 css 溢出行为 chrome vs firefox
【发布时间】：2012-04-18 13:14:57
【问题描述】：

我正在网页上创建一个特定功能，该功能需要 CSS 溢出在 Chrome 和 Firefox（理想情况下也是 IE）之间保持一致。使用 Arial 等常见网络字体时没有问题，但一旦我开始使用 google 网络字体，我发现 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 中有 溢出-y（见滚动条），但不是 Chrome

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

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

【问题讨论】：

对我来说，它们在 Chrome 18.0.1025.151 和 Firefox 11.0 (Mac OS X 10.7.3) 中看起来完全一样。
这里也一样。很可能是 Windows 字体渲染问题。

标签： fonts webfonts google-webfonts css

【解决方案1】：

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

【讨论】：

您很可能需要这样做
谢谢，请查看我的编辑以了解后续问题。（如果我可以奖励部分赏金积分，我会这样做。）
@fortuneRice - 部分赏金是不可能的；但是，您可以使用绿色复选框“接受”一个答案并将赏金奖励给另一个答案。因此，一个人将获得 +50，而另一个人将获得 +15。

【解决方案2】：

尝试在您的 CSS 中定义行高、字母间距和字间距。

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

我找到了一种使溢出更加一致的方法。意识到即使您指定了溢出：滚动，除非有理由，否则滚动不会生效，因此我们必须更加手动地强制它。

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

另外 - 我用更新的样式创建了一个 fiddle。所以现在即使盒子太小，滚动条无法显示，它仍然会占用盒子中的空间，以便始终如一地换行。

【讨论】：

感谢您的研究。我正在寻找一种让 CSS 溢出一致的方法，而不是让滚动条保持一致。对于我的特殊需要，滚动条只是 CSS 溢出的视觉指示。