CSS контур не отображается правильно в Firefox

Question

Я немного сбит с толку способом рендеринга свойства CSS outline в 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>

Как мне решить эту проблему?

Answer 1

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

Answer 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;
}