CSS：SVG作为内容适用于Chrome，但不适用于Firefox

在Firefox中，SVG图标不会显示。它显示在每个其他浏览器中。任何想法为什么？这是不是意味着被支持？CSS：SVG作为内容适用于Chrome，但不适用于Firefox

HAML

.contact-form__error 
    .contact-form__error--icon 
    .contact-form__error--text Something went wrong. Please try again later.

CSS

.contact-form__error { 
    color: red; 
    font-size: 12px; 
    margin-top: 5px; 
    position: absolute; 
    line-height: 1em; 
} 
.contact-form__error--icon { 
    // content: image-url('icons/alert_error.svg'); 
    content: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjIiIGJhc2VQcm9maWxlPSJ0aW55IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBmaWxsPSIjZTgzOTJlIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01Mi42IDYwYy0xIDMuNC00LjEgMy41LTUuMiAwLTEuMi00LTUuNC0yMy42LTUuNC0zMy41IDAtMTIuOSAxNi4yLTEzIDE2LjIgMCAwIDEwLTQuNSAzMC01LjYgMzMuNXpNNTAgODYuNGMtMy45IDAtNi42LTMtNi42LTYuOSAwLTQgMi44LTcgNi42LTcgNCAwIDYuNiAzIDYuNiA3IDAgMy45LTIuNiA2LjktNi42IDYuOXpNNTAgMEMyMi40IDAgMCAyMi40IDAgNTBzMjIuNCA1MCA1MCA1MCA1MC0yMi40IDUwLTUwUzc3LjYgMCA1MCAweiIvPjwvc3ZnPg=='); 
    width: 15px; 
    height: 15px; 
    vertical-align: text-bottom; 
    margin-right: 4px; 
    display: inline-block; 
} 
.contact-form__error--text { 
    display: inline-block; 
    vertical-align: middle; 
}

http://codepen.io/Lightheaded/pen/NGZWyj

来源

2015-11-25 Lightheaded

那么'content'属性只能用于伪元素。我猜Chrome对FF的要求不那么严格。 [** MDN Ref：Content **]（https://developer.mozilla.org/en/docs/Web/CSS/content） –

，将其固定在：before或：after代替

.contact-form__error--icon:before { 
    content: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjIiIGJhc2VQcm9maWxlPSJ0aW55IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBmaWxsPSIjZTgzOTJlIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01Mi42IDYwYy0xIDMuNC00LjEgMy41LTUuMiAwLTEuMi00LTUuNC0yMy42LTUuNC0zMy41IDAtMTIuOSAxNi4yLTEzIDE2LjIgMCAwIDEwLTQuNSAzMC01LjYgMzMuNXpNNTAgODYuNGMtMy45IDAtNi42LTMtNi42LTYuOSAwLTQgMi44LTcgNi42LTcgNCAwIDYuNiAzIDYuNiA3IDAgMy45LTIuNiA2LjktNi42IDYuOXpNNTAgMEMyMi40IDAgMCAyMi40IDAgNTBzMjIuNCA1MCA1MCA1MCA1MC0yMi40IDUwLTUwUzc3LjYgMCA1MCAweiIvPjwvc3ZnPg=='); 
}

http://codepen.io/anon/pen/WQqbbM

来源

2015-11-25 15:11:32 pilola

谢谢！无法自己弄清楚。如果您可以将Paulie_D发布的MDN参考资料链接到原始帖子的回复中，那将是一个更完整的答案。谢谢！ – Lightheaded

CSS：SVG作为内容适用于Chrome，但不适用于Firefox

回答

相关问题