标签内的SVG在IE11上被切断

Question

我有以下标记：

<a class="logo" href="/" style="
    display: inline-block;
"><img src="/img/logo.svg"></a>

仅在IE 11上，似乎img被推下并切断了。

.logo CSS

border-radius: 0;
float: left !important;
background-color: transparent;
margin-top: -10px;
padding: 0;
margin: 0;

并且在img上我只将宽度设置为130px。

Answer 1

链接以及图像均为IGNORe THIS MUST HAVE IT TO PASTE JSFiddle ，由于行高而产生大量空间。使用重置或将轮廓/边框设置为0以用于链接和图像，并将这两个元素的行高设置为1.

Answer 2

有两种方法可以解决此问题，以防其他人遇到此问题。

1. 为img指定最小宽度和最小高度，该值应大于宽度。在您的情况下，是130px，所以是131px？您必须四处查看剪辑的像素数。 -这是专门针对IE11

或

1. 赋予img的最小宽度和最小高度为100％，并将其相对于包含的元素-.logo类定位。如果要使img驻留在contains元素内部，则需要为其提供大于img的宽度。 -这对跨浏览器支持更好。

希望这会有所帮助。