Fallback for CSS attributes without unit

I don't see a doctype declaration in your HTML, so I can only assume your test page is being rendered in quirks mode.

  1. Why would it fallback to px? Is pixel always a preferred unit? Is there any rule defined in W3C working draft or recommendation?

    It will only fall back to px in quirks mode (and I believe only for certain properties). And yes, px is the preferred fallback unit. This harks back to the legacy HTML width and height attributes which accepted pixel lengths as unitless numbers.

  2. Is there a rule which makes it mandatory for a UA to fallback to a preferred unit?

    No, hence the inconsistent behavior you observe. In standards mode, though, a UA needs to ignore length values without units; the unit is not optional, as mentioned in Microsoft Connect which you quote.

    In CSS2.1, all non-zero length values must have units.

  3. Given the above example, which of the following is a correct behavior:

    • Internet Explorer: In Quirks mode (IE6,5,4..) width and border-width used to fallback to px. Since IE7 (till present, IE10RP) it ignores the whole rule if unit is missing. Therefore both rules were ignored.
    • Firefox 13: In the above example width fallback to px, but border-width was ignored.
    • Chrome 19, Opera 12, Safari 5.1.2: Both width and border-width fallback to px.

    Again, based on the assumption that your page is in quirks mode, I can only say that while the specifications make a mention of quirky behavior, the specific details of such quirky behavior aren't defined in the specifications (for both obvious and not-so-obvious reasons).

    I'm guessing Microsoft changed the quirks-mode behavior in IE7+ to reflect standards behavior for unitless values, as quirks mode exists in all browsers (except IE < 6) and is triggered with the same improper doctype or lack of a doctype. The behavior in standards mode has not changed, though, as far as I'm aware.