CSS outline not rendering correctly in Firefox

Question

I'm a bit baffled with the way the CSS outline property is rendering on Firefox 7 or below. It's clearly got a problem somewhere, but I just can't find it.

It works fine on all other main browsers (Opera, Chrome, IE, Safari).

I've added a couple of screenshots for reference. One from Firefox:

and the other from Chrome:

Here's the CSS:

form#commentform input:focus { outline: 2px outset #717377 }

Here's XHTML:

<form id="commentform">
      <div>
         <label for="name">
            <strong>
            Nom
            <span id="sname"></span>
            </strong>
         </label>
         <input type="text" tabindex="1" id="name" name="name" class="textbox" />
      </div>
...
</form>

How can I solve this?

Answer 1

On Firefox outlines are drawn around the box-shadow (not inside).
So you will have to serve it (using a css hack) an additional rule: outline-offset: -X (X = shadow's length).

Answer 2

This bug will be fixed with Firefox 30: https://bugzilla.mozilla.org/show_bug.cgi?id=480888#c109.

Until then you could apply another box-shadow to the element, since you can have multiple box-shadows:

.element {
    box-shadow: your values old box-shadow, 0 0 0 2px #717377;
}