$（''）。css（'height'）返回计算的高度，而不是JQuery中的CSS高度

Question

I defined the height property of an element using CSS. If the computed height is different from the defined height, then $(element).css('height') returns the computed height, not the height that I defined in CSS. I thought that css() returns the height defined in CSS.

Here's a fiddle to show what I mean: http://jsfiddle.net/D9rQR/ I expected css() to return 100px , but it's returning 20px . I'm using Chrome.

How do get the defined height ( 100px in the fiddle) using JQuery/Javascript?

Edit: In the example, I set a max-height to emulate what happens in browsers that don't support height for select s. I'm using the following to check if the browser computes the height properly:

if($('select').outerHeight()<parseInt($('select').css('height'))){
    // browser doesn't support "height" for "select"s
}

However, this doesn't work because $('select').css('height') always returns the computed height.

Answer 1

$('select').height() is height of select without padding

$('select').css('height') is actual height (has padding)

$('select').css('height') = $('select').outerHeight();

Answer 2

If you add border:0; and remove max-height you will get the correct height, as height does not get applied on selects unless border is 0, not sure if this also applies to ie.