jQuery css() function won't apply IE hack attributes

Question

I'm trying to apply an inline-block style to an element (a div to be specific). And in order to achieve this in IE you have to use a hack:

$('#element').css(
    {
        'display'  :    'inline-block',    //applies inline-block to matched elements in all browsers except IE due to hasLayout bug
        'zoom'     :    1,                 //set hasLayout to 'true' in IE
        '*display' :    'inline'           //use asterisk to only apply 'inline' style to IE
    }
);

However, the css() function seems to present the style to the browser such that '*display' doesn't register in IE and so therefore doesn't apply the 'inline' style.

Any ideas on why and/or how to work around this?

Thanks in advance!

Answer 1

I think this should do it then:

if($.browser.msie){
    $('#element').css({'display' : 'inline'});
}

Answer 2

jQuery is going to filter out "bad" css properties - ie. hacks when using the css function.

However, Youre in jvascript - DO THE DETECTION IN JAVASCRIPT. There is no reason to use a hack because you have all kinds of tools at your disposal to detect not only for IE but the version. Rambo's solution is adequate :-)

Answer 3

As said above, jQuery's not going to let you apply invalid properties. If you need to do it anyway, put them in a CSS class and toggle the class off and on with addClass() and removeClass().