jQuery .css() behaves differently in FF and IE

When t开发者_Python百科here 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

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.

This looks like it's just returning the browser defaults. If no border at all is specified, each browser has its own defaults. So here, if you were to add a border-style, IE would automatically show a medium border in that style, but FF would have nothing because the default width is 0.

Whenever your designing a web style you should always reset all elements to a default so that there consistent in all browsers.

Include the YUI Reset package in your css so that all values are fliud throughout all browsers.

http://developer.yahoo.com/yui/reset/

Then when you call for the value of a css element there will all start at the same value, unless another jquery instance changed it before you asked for the value.