Given a region where the line-height and any margins are n
, and the region has a height that is a multiple of n
, and the scrollTop is increased by mult
It appears this has to do with descenders (qjpg) "sticking out" down below the line-height box. Firefox and Safari seem to agree on how to do this - characters are allowed to stick out. However by exaggerating the sizes x 10, we notice something interesting for sans-serif
.
In Mac OS X, both Safari and Firefox chose helvetica
as the typeface for sans-serif
. But Firefox moves that particular typeface upwards in the line-height box, so the bottom doesn't "stick out". Compare with arial
- microsoft's bastardization of helvetica
where both browsers let it stick out.
I think the solution to your problem is to find a "reasonable" negative margin to offset the content upwards. It seems both helvetica
and arial
have some "wiggle room" at the top of the box. I would use #wrapper #content { margin-top: -1px; }
(selector extra strong to overcome #wrapper *
) for the specific font-size
/line-height
in your example.
Here's my test code. It shows that the "sticking out" can be much worse for geneva
and verdana
.
descender issue
descender issue
sans-serif
lfgjpq
arial
lfgjpq
geneva
lfgjpq
helvetica
lfgjpq
trebuchet ms
lfgjpq
verdana
lfgjpq
serif
lfgjpq
times
lfgjpq