Đường viền CSS không hiển thị chính xác trong Firefox

Question

Tôi hơi bối rối với cách mà thuộc tính CSS outline được hiển thị trên Firefox 7 trở xuống. Rõ ràng là có vấn đề ở đâu đó, nhưng tôi không thể tìm thấy nó.

Nó hoạt động tốt trên tất cả các trình duyệt chính khác (Opera, Chrome, IE, Safari).

Tôi đã thêm một vài ảnh chụp màn hình để tham khảo. Một từ Firefox:

và khác từ Chrome:

Đây là CSS:

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

Dưới đây là 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> 

Làm cách nào để tôi có thể giải quyết vấn đề này?

Answer 1

Trên đường viền của Firefox được vẽ xung quanh box-shadow (không phải bên trong).
Vì vậy, bạn sẽ phải phục vụ nó (sử dụng một css hack) một quy tắc bổ sung: outline-offset: -X (X = chiều dài của bóng tối).

Answer 2

Lỗi này sẽ được sửa bằng Firefox 30: https://bugzilla.mozilla.org/show_bug.cgi?id=480888#c109.

Cho đến lúc đó bạn có thể áp dụng một hộp-bóng tối để nguyên tố này, vì bạn có thể có nhiều hộp bóng:

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