.css('fontSize') returns different value in Internet Explorer

[kswedberg]

The .css() method returns a different font-size value for Firefox and Internet Explorer if the stylesheet has set the size with any unit other than pixel.

As Dave Methvin explains*, this has something to do with Firefox and other browsers using getComputedStyle (which computes the size in px) while IE uses currentStyle (which gets the size from the style rule).

The difference can be problematic in some cases.

* http://www.nabble.com/.css%28%29-px-vs.-em-tf2932069.html

[lukelutman]

IE returns values for all properties (not just font-size) in whatever units were specified in the stylesheet (em, in, cm, etc...).

I've been working on a hack/fix that boils down to:

• insert a temporary element into the dom as a sibling of the target element
• set the temp element's font-size to match the target element's font-size
• set the temp element's width to the non-px value
• measure the temp element using offsetWidth (which is always in pixels)

Here's an example:

(function($){
var tmp = $('<span style="border: 0; display: block; padding: 0; position: absolute; overflow: hidden;" />')[0];
$.px = function(elem, val) {
    if(elem && elem.parentNode && /(cm|em|in|pt)$/.test(val)) {
    var style = (document.defaultView && document.defaultView.getComputedStyle && document.defaultView.getComputedStyle(elem, null)) || elem.currentStyle;
    tmp.style.fontSize = (style.getPropertyValue && style.getPropertyValue('font-size')) || style.fontSize;
    tmp.style.width = val;
    elem.parentNode.insertBefore(tmp, elem);
    val = tmp.offsetWidth + 'px';
    tmp.parentNode.removeChild(tmp);
    return val;
};
})(jQuery);

Which can be used like so:

var elem = $('p')[0];
var value = $(elem).css('font-size');
// px returns undefined if the value can't be converted, so default to the original value.
var fixed = $.px(elem, value) || value;

[john]

Fixed in SVN rev [3132].

[gudoy]

It seems that the bug reappeared in 1.2.1 release.

[bruno1378]

Yes, I am seeing this using the latest release of jQuery (1.2.1).

var fontSize = $('body').css('font-size');

In IE it's returning 795px.

My CSS on the body is

font: 68.75%/1.366 Verdana, Tahoma, Arial, Helvetica, sans-serif;

[bruno1378]

actually i've noticed

.css('font-size')

works different than

.css('fontSize')

which returns the same cross-browser...just not the computed style. This works fine for my application at the moment...

[kswedberg]

Hmm. I'm not seeing any difference between .css('fontSize') and .css('font-size') using 1.2.6.

Looks like the problem now might have to do with the value being computed up the DOM tree. When font size is set to a percentage, it's affected by the window width.

See example here (jQuery should say "18px" for all of them): http://test.learningjquery.com/font-size.html

[devjquery]

• Web Designing * SEO Services * Free Website Builder * Web Development India * Website SEO Optimization * Web Design Services * PPC Services * Content Management System * Web Design Portfolio * Affordable SEO * ssl certificate * Search Engine Optimization