HTML/CSS 跨浏览器与 SVG 不一致

Question

我一直在修补，试图让图像在浏览器中呈现一致。

HTML:

<fieldset class="legend">
    <img class="legend-a"/>
    <img class="legend-b"/>
    <img class="legend-c"/>
    <img class="legend-d"/>
    <img class="legend-e"/>
</fieldset>

CSS:

.legend {border: 0; display: inline;}
.legend-a{ background: url(yellow.svg); }
.legend-b{ background: url(orange.svg);}
.legend-c { background: url(purple.svg);}
.legend-d { background: url(dull_purple.svg); }
.legend-e { background: url(blue.svg);}

目前上面的工作正常(图像并排显示在一行中)对于 IE(版本 11)但在 Chrome 或 Firefox 中不是(空白，没有图像)。

以前我用过content: url(purple.svg);而不是 background: url(purple.svg);但这只适用于 Chrome；但不在 IE 或 FireFox 中。

太麻烦了。我必须保留 <fieldset.../> HTML 尽可能简洁，因为它在各处重复，如 <td>

.svg 看起来像这样(例如)blue.svg:

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 36.232 36.232" enable-background="new 0 0 36.232 36.232" xml:space="preserve">
<circle fill="#37ADC4" cx="17.981" cy="18.179" r="16"/>
</svg>

这是一个 JSFiddle .只有“内容”版本适用于 JFiddle。

Answer 1

那是因为你的 <img>没有尺码。如果您提供大小，那么背景也会呈现。我不知道在这种情况下 IE 会选择什么尺寸...？

.legend {border: 0; display: inline;}
.legend-a{ background: url(https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg); }
.legend-b{ background: url(https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg);}
.legend-c { background: url(https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg);}
.legend-d { background: url(https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg); }
.legend-e { background: url(https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg);}

.legend img{width:32px;height:32px}

<fieldset class="legend">
    <img class="legend-a"/>
    <img class="legend-b"/>
    <img class="legend-c"/>
    <img class="legend-d"/>
    <img class="legend-e"/>
</fieldset>