为什么我不能在jQuery中使用.css（）更改行高CSS属性？

Question

I'm trying to change the line-height property with jQuery using this:

jQuery(document).ready(function () {
    var windowWidth = $(window).width();
    $('h1').css({
        'top': Math.floor(windowWidth * 0.0964) + 'px',
        'left': Math.floor(windowWidth * 0.0872) + 'px',
        'line-height': '0.9em !important'
    });
});

If I use the inspector and check the element style, I can see the top and left property but not the line-height, can someone explain to me what's wrong?

And here's the jsFiddle I made just to be sure I'm not crazy!
http://jsfiddle.net/p4DU6/4/

Tested it in FF, Chrome, IE8 and IE9

Answer 1

Don't use !important . There's no need for that.

It works for me if you remove that.

Your inline style will have higher specificity than anything else in your CSS anyway, so no need to use !important .

Answer 2

This is discussed here: How to apply !important using .css()?

The problem seems to be the !important statement. There is a bug report for jquery and a way to work around it, namely creating new classes and combining them:

http://bugs.jquery.com/ticket/11173