Question

When there is no border, why IE returns medium while FF returns 0px on the following query ?

.css("border-left-width")

I checked this in FF 3.6.3 and IE 6/7.

Example here

Answer 1

Using css() to read stylesheet-applied styles does different things on different browsers.

On IE, it reads values from the IE-specific currentStyle object, which is the only way to access this information. currentStyle gives you what CSS calls the ‘specified style’, that is to say just what you wrote in the stylesheet. If you haven’t overridden it, the initial value of border-width is ‘medium’ so that’s directly what you get.

On other browsers, css() uses the standard DOM Level 2 CSS method getComputedStyle(). Unlike IE’s currentStyle, this returns the ‘computed style’, which is different from the specified style in that relative units like ‘medium’ are resolved to actual lengths.

Here ‘medium’ would normally resolve to a length of about 3px, but you presumably haven’t actually turned the border on for that element, so it defaults to border-style: none. That makes the border-width resolve to zero.

Usually the ‘specified style’ and the ‘computed style’ are close enough to each other that you can get away with treating them in the same way, and that’s what jQuery’s css() method is relying on. But in reality they aren’t quite the same.