CODEWITHSUNDEEP
javascriptjquerycssinternet-explorer-8cross-browser
emersonthis
emersonthis

Reputation: 33398

jQuery: how to make css('line-height') work cross-browser

I'm supporting IE8 and up.

$(something).css('line-height');

In Chrome this returns 32px but in IE8 it returns normal

How do I get around this? Maybe a native javascript variation?

Upvotes: 2

Views: 559

Answers (2)

Abraham Uribe
Abraham Uribe

Reputation: 3118

    function lineHeight(element){
       var tmp=$("<div>test</div>");
       element.append(tmp);
       tmp.css({"padding":"0","margin":"0","border":"0"});
       var height = tmp[0].clientHeight;
       tmp.remove();
       return height;
    }

jsfiddle in FF and Chrome return 20px but on IE8 18px

Upvotes: 0

emersonthis
emersonthis

Reputation: 33398

Seems like this is a webkit vs. IE issue. Not sure about FF, but there are a couple options for how to fix it. Overtly specifying a pixel value will work. But I don't like doing that because it's harder to keep things in proportion if you scale the text, etc with media queries. I was able to get it working by overtly specifying the line-height in ems (rather then letting it inherit). It's also relevant that it was previously set to rems which IE8 doesn't recognize.

Upvotes: 1

Related Questions