样式未应用于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标记不同。*之所以有效，是因为它不区分大小写。