Side navigation
#760 closed bug (fixed)
Opened January 07, 2007 01:09AM UTC
Closed November 11, 2009 07:17PM UTC
Last modified March 13, 2012 07:40PM UTC
.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
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)
this is a proof of the patch's concept.
patch: fix css("font-size") in IE
Change History (14)
Changed January 08, 2007 02:41AM UTC by comment:1
milestone: | 1.1a |
---|
Changed March 12, 2007 09:53PM UTC by comment:2
Changed March 24, 2007 05:42PM UTC by comment:3
milestone: | → 1.1.3 |
---|---|
need: | → Test Case |
version: | → 1.1.2 |
Changed September 07, 2007 09:40PM UTC by comment:4
description: | 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 → 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 |
---|---|
milestone: | 1.1.3 → 1.2 |
resolution: | → fixed |
status: | new → closed |
version: | 1.1.2 → 1.1.4 |
Fixed in SVN rev [3132].
Changed September 27, 2007 01:52PM UTC by comment:5
resolution: | fixed |
---|---|
status: | closed → reopened |
It seems that the bug reappeared in 1.2.1 release.
Changed November 01, 2007 03:03PM UTC by comment:6
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;
Changed November 01, 2007 06:40PM UTC by comment:7
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...
Changed August 27, 2008 05:18PM UTC by comment:8
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):
Changed July 10, 2009 04:34AM UTC by comment:9
Doing a bit of testing reveals the discrepancy has an approximated formula for the returned ie value (based on a em value from css):
n^2 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);
Changed July 10, 2009 04:35AM UTC by comment:10
n^2 x 12 = ie value in pixels.
hmm the page didn't like my carat. it's n(to the power of)2 x 12
Changed July 10, 2009 04:50AM UTC by comment:11
Replying to [comment:11 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 September 01, 2009 02:50AM UTC by comment:12
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 October 25, 2009 12:12PM UTC by comment:13
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.
Changed November 11, 2009 07:17PM UTC by comment:14
milestone: | 1.2 → 1.4 |
---|---|
resolution: | → fixed |
status: | reopened → closed |
version: | 1.1.4 → 1.3.2 |
Landed fix for this:
http://github.com/jquery/jquery/commit/449e099b97d823ed0252d8821880bc0e471701ea
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:
Here's an example:
Which can be used like so: