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。只有＆＃39;内容＆＃39;版本适用于JFiddle。

Answer 1

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

＆＃13;

.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}

＆＃13;

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

＆＃13;

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

1 个答案: