Góc tròn trong Firefox: khoảng cách giữa đường viền và nền

Question

Tôi có một div mà tôi đang áp dụng các góc tròn.

Đây là số demo fiddle của tôi.

<div>&nbsp;</div> 

div { 
    margin: 20px; 
    width: 250px; 
    height: 250px; 
    -moz-border-radius: 15px; 
    -webkit-border-radius: 15px; 
    -khtml-border-radius: 15px; 
    border-radius: 15px; 
    background-color: #4c66a1; 
    border: 2px solid #4c66a1; 
} 

Tôi cũng có một màu đường viền và nền áp dụng cho div này. Vấn đề phát sinh trong Firefox. Có một khoảng trắng nhỏ giữa đường viền và màu nền của div (xem hình bên dưới). Nó là rất tối thiểu, nhưng mọi người đã nhận thấy nó dù sao. Nó trông giống như một hiệu ứng ánh sáng ở góc.

Đây có phải là sự cố đã biết với các góc được làm tròn trong Firefox không? IE, Chrome và Opera đều ổn.

FYI/Vì mục đích minh họa vấn đề tôi đã tạo đường viền và màu nền giống nhau mặc dù nó không cần thiết. Nó làm cho khoảng trống nổi bật hơn.

 Firefox  Chrome/IE/Opera

               

Answer 1

Điều thú vị là, nếu chúng ta thay đổi nó để chấm, màu trắng biến mất:

div { 
    margin: 20px; 
    width: 250px; 
    height: 250px; 
    -moz-border-radius: 30px; 
    -webkit-border-radius: 30px; 
    -khtml-border-radius: 30px; 
    border-radius: 30px; 
    background-color: #4c66a1; 
    border: 2px dotted #4c66a1; 
} 

http://jsfiddle.net/5yAkZ/23/

EDIT có css hợp lệ trước đây

Answer 2

Kiểm tra này ra là thế này bạn muốn JsFiddle

<div id='ex1' class='exampleRound'>&nbsp;</div> 

#ex1{ 
    border-radius: 50px; 
    height: 200px; 
    width: 200px; 
} 
.exampleRound { 
    background: none repeat scroll 0 0 #4c66a1; 
    border: 5px solid pink; 
    font-size: 20px; 
    font-weight: bold; 
    margin-bottom: 30px; 
    padding: 20px 40px; 
    margin:20px 
} 

Answer 3

Xem https://bugzilla.mozilla.org/show_bug.cgi?id=704399 được cố định trong Firefox 11 và mới hơn.