Bug Tracker

Opened 10 years ago

Closed 8 years ago

Last modified 5 years ago

#760 closed bug (fixed)

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

Reported by: kswedberg Owned by:
Priority: minor Milestone: 1.4
Component: core Version: 1.3.2
Keywords: css, style IE Cc:
Blocked by: Blocking:

Description (last modified by john)

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.

Attachments (2)

jquery-css-fontsize-ie.patch (472 bytes) - added by haruka 8 years ago.
patch: fix css("font-size") in IE
jquery-css-fontsize-ie-proof.html (3.0 KB) - added by haruka 8 years ago.
this is a proof of the patch's concept.

Download all attachments as: .zip

Change History (16)

comment:1 Changed 10 years ago by john

Milestone: 1.1a

comment:2 Changed 10 years ago by 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;

comment:3 Changed 10 years ago by john

Milestone: 1.1.3
need: Test Case
Version: 1.1.2

comment:4 Changed 10 years ago by john

Description: modified (diff)
Milestone: 1.1.31.2
Resolution: fixed
Status: newclosed
Version: 1.1.21.1.4

Fixed in SVN rev [3132].

comment:5 Changed 10 years ago by gudoy

Resolution: fixed
Status: closedreopened

It seems that the bug reappeared in 1.2.1 release.

comment:6 Changed 10 years ago by 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;

comment:7 Changed 10 years ago by 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...

comment:8 Changed 9 years ago by 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

comment:11 in reply to:  description ; Changed 8 years ago by binarypusher

Doing a bit of testing reveals the discrepancy has an approximated formula for the returned ie value (based on a em value from css):

n2 x 12 = ie value in pixels.

so css: 1.0em, firefox: 12px, ie:12px css: 2.0em, firefox: 24px, ie:48px css: 3.0em, firefox: 36px, ie:108px

to fetch an approximated px value in ie:

square root of (the iepx value / 12)

so parseint(Math.sqrt($(obj).css("font-size")/12),10);

comment:12 in reply to:  11 Changed 8 years ago by binarypusher

n2 x 12 = ie value in pixels.

hmm the page didn't like my carat. it's n(to the power of)2 x 12

comment:13 in reply to:  11 Changed 8 years ago by binarypusher

Replying to binarypusher:

to fetch an approximated px value in ie: parseint(Math.sqrt($(obj).css("font-size")/12),10);

should have checked this before hand. sorry for the multiposts ... can't see how to edit an entry. here's the working version:

(Math.sqrt(parseInt($(this).css("font-size"),10).toFixed(2)/12)*12).toFixed(1);

Changed 8 years ago by haruka

patch: fix css("font-size") in IE

comment:14 Changed 8 years ago by haruka

In IE, when font-size is set to "2.0em" in CSS, you get '2.0 * 2.0 em' size in pixels with css("font-size"). Because the size is calculated "2.0em" relational size of "the element's font size (..is 2.0em)".

And when font-size is set to "80%" is CSS, css("font-size") is calculated "80%" relational size of "the element's width".

The patch (jquery-css-fontsize-ie.patch) will fix it. after patched, curCSS method always calculates "1em" of "the element's font size" when css("font-size") called.

Changed 8 years ago by haruka

this is a proof of the patch's concept.

comment:15 Changed 8 years ago by trixi

The fix by haruka orks well. I´m using a similiar approach to fix this odd behaviour in my clip-Animation-Plugin (http://plugins.jquery.com/files/clip.js.txt). But I would suggest, that you use a 100em base instead of 1em, to get information about "subpixels". getComputedStyle also returns floating point pixel-values and its important, if you want to multiply the fontsize with another value.

If you are fixing this, it would be great, if you also fix backgroundPosition and clip.

comment:16 Changed 8 years ago by john

Milestone: 1.21.4
Resolution: fixed
Status: reopenedclosed
Version: 1.1.41.3.2
Note: See TracTickets for help on using tickets.