css 填充和边框在 firefox 中的行为不同

Question

它看起来像我喜欢的 chrome 和 safari。但它在 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不能被覆盖。