它看起来像我喜欢的 chrome 和 safari。但它在 Firefox 中看起来很奇怪。它似乎被切断了。我想知道是否有更好的方法来存档与 chrome 和 safari 中相同的结果,而不是使用方框的实际图像。有任何想法吗?黑客?
.square {
border:1px solid #0C6DBE;
background-color:#4293D9;
padding:5px;
}
<img class="square"></img>
最佳答案
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不能被覆盖。
关于css 填充和边框在 firefox 中的行为不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16994847/