我正在网页上创建一个特定功能,该功能需要 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”,两种浏览器都没有溢出。
2) 在 Firefox (L) 和 Chrome (R) 上运行 jsfiddle 演示的屏幕截图。使用“Playball”,Firefox 中存在溢出(请参阅滚动条)但 Chrome 中没有
如何使 Chrome 和 Firefox 之间的 CSS 溢出保持一致?
编辑:根据 Kamal 在下面的评论,我已经为两个 div 添加了行高,实际上滚动条的外观现在是一致的。然而,另一个问题在第三行,“跳过”适合 Chrome,但只有“跳过”适合 FF。有任何想法吗?最新的小提琴。