« Return to Thread: .css() px vs. em

Re: .css() px vs. em

by Luke Lutman :: Rate this Message:

I've run into the same problem with IE :-(

I did more or less what Dave suggested (untested, of course!):

var $tmp = $('#some-element')
.append('<div style="position: absolute; width: ' +
$('#some-element').css('font-size') + ';" />')
.find(':last-child')

var fontSizeInPx = $tmp.width();

$tmp.remove();

This would work for other units (i.e. in, pt) and other properties
(text-indent, line-height) too.

Some things to watch out for:
* the element you want to measure must be able to have children (i.e.
not <br />, <img />)
* this method makes the browser to two extra re-flows (I think?)
* make sure the appended div doesn't pick-up any funny business from the
cascade.

Luke

Dave Methvin wrote:

>> Firefox is returning the value in pixels while IE6 is returning
>> the value in ems. Is this a bug?
>
> It's just IE being IE. Other browsers have getComputedStyle which tells
> you the dimensions in pixels. IE has currentStyle; although that does
> tell you the current style (taking the CSS cascade into effect) it
> returns whatever dimensions were given in the style rule. jQuery's
> .css() method uses whatever it's dealt by the browser.
>
> I think I've seen IE hacks where you can put a box around a character
> and then measure the box in pixels to get the font size, but my
> Google-fu is weak at the moment.
>
>
> ------------------------------------------------------------------------
>
> _______________________________________________
> jQuery mailing list
> discuss@...
> http://jquery.com/discuss/

_______________________________________________
jQuery mailing list
discuss@...
http://jquery.com/discuss/

« Return to Thread: .css() px vs. em