google fonts css overflow behaviour chrome vs firefox

 

I'm creating a specific function on a webpage that requires CSS overflow to be consistent between Chrome and Firefox (and ideally IE as well). When using common web fonts such as Arial there are no problems, but once I start using google web fonts, I see a difference in the CSS overflow.

Here's a demo: jsfiddle demo This is a fixed width div with some sample text. "Playball" is a google font. 

#box {
   height: 160px;
   width: 200px;
   border: black 1px solid;    
   font-size: 2em;
   font-family: 'Playball', cursive;
   overflow-x: hidden;
   overflow-y: scroll;   
}

1) Screenshot of running jsfiddle demo on Firefox (L), and Chrome (R). Using "Arial", there is NO overflow-y in both browsers. FF（L）与Chrome（R），ARIAL，NO overflow-y

2) Screenshot of running jsfiddle demo on Firefox (L), and Chrome (R). Using "Playball", there IS overflow-y in Firefox (see scrollbars) but NOT Chrome FF（L）与Chrome（R），PLAYBALL，溢出-y

How can I make the CSS overflow consistent between Chrome and Firefox?

EDIT: Per Kamal's comment below, I've added a line height to both divs and indeed the scrollbar appearance is now consistence. However, another problem is on the third line, "jumped over the" fits in Chrome but only "jumped over" fits in FF. Any ideas? Latest fiddle.

Chrome L，FireFox R

Try changing the line height, as both screenshots, to me, look a little different in the spacing only, between the lines. EDIT : You should also try adjusting letter-spacing.

I found a way to make your overflow more consistent. Realizing even though you specify overflow: scroll, the scroll doesn't take any effect unless there is a reason for it to, so we have to force it a bit more manually.

I found part of the solution here: How can I prevent scroll bars from being hidden for OS X trackpad users in WebKit/Blink?

Also - I created a fiddle with the updated styles. So now even when the box is too small for the scrollbar to show up its still taking up space in the box in order to wrap your lines consistently.

I think this is not solvable for each browser using different render engine, I mean browser elements like scroll-bar or checkbox (especially in Windows, you may test it on XP and 7, also in OSX and Linux)

Letter-spacing and Line-height, issue always occurred.

链接地址: http://www.djcxy.com/p/66450.html

上一篇: Google网页字体在Chrome / Mac上以特定像素尺寸显示出奇怪

下一篇: 谷歌字体的CSS溢出行为铬与火狐