css paddings и границы ведут себя по-разному в firefox

Question

Он выглядит так, как мне нравится в хроме и сафари. но в firefox это выглядит очень странно. Кажется, он отключен. Интересно, есть ли лучший способ архивирования тех же результатов, что и в хром и сафари, за исключением использования фактического изображения квадратной коробки. Есть идеи? Хаки?

http://jsfiddle.net/vf6gh/

.square { 
    border:1px solid #0C6DBE; 
    background-color:#4293D9; 
    padding:5px; 
} 

<img class="square"></img> 

Answer 1

Firefox применяет некоторые CSS осколками <img> теги:

img:-moz-broken:before, 
input:-moz-broken:before, 
img:-moz-user-disabled:before, 
input:-moz-user-disabled:before, 
img:-moz-loading:before, 
input:-moz-loading:before, 
applet:-moz-empty-except-children-with-localname(param):-moz-broken:before, 
applet:-moz-empty-except-children-with-localname(param):-moz-user-disabled:before { 
    content: -moz-alt-content !important; 
    unicode-bidi: -moz-isolate; 
} 

Если вы действительно планируете использовать <img> просто показать квадрат, как вы хотите, переосмыслить ее. Эти теги не были сделаны для этого, и Firefox является доказательством этого.

Для справки: пользовательский агент CSS с пометкой !important не может быть переоценен.