css - 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 就是证明。

知识：标记为的用户代理 CSS!important不能被覆盖。