css - 样式不适用于 Firefox 和 IE 中的 SVG 元素

Question

这是一个奇怪的问题。我这里有一些简单的 HTML。

<a href="#">
    <svg><use xlink:href="/images/iconSprite.svg#facebook"></use></svg>
</a>

我将它设计成这样。

A{width:40px; height:40px;}    

A > SVG{
    width: 65%;
    height: 65%;
    fill: white;
}

这在 Chrome 中完美运行，并且出于某种原因在 IE9 中完美运行，但是在 Firefox(最新)和 IE 10 和 11 中，元素消失时根本没有样式。

但是，如果我将选择器从 A > SVG 更改为 A > *，它在这两种情况下都能完美运行。这看起来很老套，我宁愿了解问题所在，并尽可能提出一个更简洁的解决方案。

我本以为如果不能在选择器中使用 SVG，那么互联网上会有很多人提到这一点，但我找不到任何东西，所以我一定是做错了什么。

如有任何帮助，我们将不胜感激。

Answer 1

这个问题似乎是由 CSS 中的 svg 选择器大写引起的。以下面的代码片段为例，其中使用 SVG 不起作用，但 svg 可以。

示例:

.wrap-a > SVG {
    background: blue;
}
.wrap-b > svg {
    background: green;
}

<a class="wrap-a">
    <svg width="226" height="226"><circle cx="110" cy="107" r="80" stroke="black" stroke-width="5" fill="red" /></svg>
</a>
<a class="wrap-b">
    <svg width="226" height="226"><circle cx="110" cy="107" r="80" stroke="black" stroke-width="5" fill="red" /></svg>
</a>

这很可能与 SVG 标签区分大小写有关，这与 HTML 标签不同。 * 起作用的原因是它不区分大小写。