在Firefox中，css填充和边框的行为有所不同

Question

它看起来像我喜欢的铬和野生动物园。但在firefox中看起来很奇怪。它似乎被切断了。我想知道除了使用方形盒的实际图像之外，是否有更好的方法来存档与chrome和safari相同的结果。有任何想法吗？黑客？

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就是这方面的证明。

知识：无法覆盖标有!important的用户代理CSS。