4

我正在网页上创建一个特定功能，该功能需要 CSS 溢出在 Chrome 和 Firefox（理想情况下也是 IE）之间保持一致。使用 Arial 等常见网络字体时没有问题，但一旦我开始使用 google 网络字体，我发现 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”，两种浏览器都没有溢出。 FF(L) vs Chrome(R)，ARIAL，无溢出-y

2) 在 Firefox (L) 和 Chrome (R) 上运行 jsfiddle 演示的屏幕截图。使用“Playball”，Firefox 中存在溢出（请参阅滚动条）但 Chrome 中没有 FF(L) vs Chrome(R)，PLAYBALL，溢出-y

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

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

铬 L，火狐 R

4

4 回答 4

4

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

于 2012-04-07T12:40:39.770 回答
0

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

我在这里找到了部分解决方案：如何防止在 WebKit/Blink 中为 OS X 触控板用户隐藏滚动条？

另外 - 我用更新的样式创建了一个小提琴。因此，现在即使框太小而滚动条无法显示，它仍会占用框内的空间，以便始终如一地换行。

于 2012-04-07T19:25:32.497 回答
0

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

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

于 2012-04-13T05:56:47.067 回答
0

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

于 2012-04-13T05:58:16.937 回答