jQuery .css not changing font-size correctly in Chrome

Question

This is the closest I've seen: Changing font-size with jQuery css() function is crashing Chrome But it didn't help.

Other threads mentioned that it's a bug in Webkit, but those were old threads and I couldn't find the bug report on Webkit's site.

The problem is that the header has a fixed width picture background and the navigation menu needs to stay within that width. I've since given up on HTML or CSS methods of accomplishing this. If you know of any, then please do share. So I've resorted to JavaScript (jQuery). And it works reasonably well, except in Chrome. The text actually increases in size for some odd reason.

Here's the simplified code in JSFiddle: http://jsfiddle.net/alininja/j4jD9/12/

This gist of the code is this line:

$('body').css('font-size',(content_size-1)+'px');

For FireFox and Opera, the text size decreases to fit the header width, but not in Chrome.

If I run JSFiddle in Chrome everything works, but the funny behavior shows up on the actual website. This is happening on Chrome 17.0.963.56.

Thanks in advance!

Answer 1

If you want presentation consistency cross browser there is more involved than just setting font-size . You are assuming other font property defaults such as font-family are the same cross browser which they are not.

Use of a css reset will help