CSS-схема не корректно отображается в Firefox

Я немного озадачен тем, как свойство CSS-контуров отображается на Firefox 7 или ниже. У него явно была проблема, но я просто не могу ее найти.

Он отлично работает во всех других основных браузерах (Opera, Chrome, IE, Safari).

Я добавил пару скриншотов для справки. Один из Firefox:

а другой из Chrome:

Здесь CSS:

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

Здесь 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>

Как я могу это решить?

Ответ 1

В Firefox контуры рисуются вокруг box-shadow (не внутри).
Таким образом, вам придется выполнить его (используя css-взломать) дополнительное правило: outline-offset: -X (X = длина тени).

Ответ 2

Эта ошибка будет исправлена с Firefox 30: https://bugzilla.mozilla.org/show_bug.cgi?id=480888#c109.

До тех пор вы можете применить к элементу еще одну тень для ящика, поскольку у вас может быть несколько теней коробок:

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