[css] border-width follows spec, but isn't the same computed value in FF and Chrome

[usadson]

Reproduction

Take the following example from ACID 1

html {
    font: 10px/1 Verdana, sans-serif;
    background-color: blue;
    color: white;
}

li {
    display: inline;
    /* i.e., suppress marker */
    color: black;
    height: 9em;
    width: 5em;
    margin: 0;
    border: .5em solid black;
    padding: 1em;
    float: left;
    background-color: #FC0;
}

Explanation

Here, the computed value of font-size is 10px. This is the same as in other browsers.

Setting a border-width of .5em would “obviously” compute to 10 * 0.5 = 5px right? No. Firefox and Chrome both compute the value to 4.8px:

The weirdest part is, when rendering the given borders, both browser engines render a rect of 6 pixels wide!

Specification

The definition of the em unit (CSS-VALUES-4) is as follows:

Equal to the computed value of the font-size property of the element on which it is used.

The definition of the border-width property (CSS-BACKGROUNDS-3) is as follows:

These properties set the thickness of the border. Where = <length [0,∞]> | thin | medium | thick

Negative values are invalid. The thin, medium, and thick keywords are equivalent to 1px, 3px, and 5px, respectively.

The border-width property is a shorthand property for setting border-top-width, border-right-width, border-bottom-width, and border-left-width in a single declaration.

If there is only one component value, it applies to all sides. If there are two values, the top and bottom are set to the first value and the right and left are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values they apply to the top, right, bottom, and left, respectively.