Question

知道为什么会这样吗？

如果您将以下内容粘贴到Chrome中的新codepen.io中，则会显示罚款，并且位于左上角。

然而，在IE中查看它并在页面中间右侧

<svg version="1.1" class="pull-left svg-header-tick" xmlns="http://www.w3.org/2000/svg" height="22px" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 92 72" enable-background="new 0 0 92 72" xml:space="preserve"><g><path class="svgcolor" d="M28.1,71.8L1.9,45.6c-2.3-2.3-2.3-6.1,0-8.5c2.3-2.3,6.1-2.3,8.5,0l17.8,17.8L81,2c2.3-2.3,6.1-2.3,8.5,0
    c2.3,2.3,2.3,6.1,0,8.5L28.1,71.8z"></path></g>
                                </svg>

Answer 1

在我的快速测试中，似乎仅通过设置width IE（不是Edge - 它看起来很好）就可以水平拉伸整个Product Name元素。如果您添加$(TARGET_NAME)属性，它会快速回到左上角。如果你在CSS中设置高度和宽度，它也有效。

From CSS Tricks:

许多浏览器 - IE，Safari以及2014年夏季之前发布的Opera和Chrome版本 - 不会自动调整内联SVG大小。如果您没有同时指定高度和宽度，这些浏览器将应用其通常的默认大小，如前所述，对于不同的浏览器，这些大小会有所不同。图像将缩放以适合该高度或宽度，再次在其周围留下额外的空白。同样，如果你将高度和宽度都保持自动，会发生什么不一致。

IE正在集中我的svg

1 个答案: