IE11 上的 .svg 图像，height 属性不起作用，但 max-height 起作用

Question

我需要在我的页面上显示一个 .svg 徽标，但发现它在 IE11 上显示不正确。它按比例缩放，只显示了一部分，而其他浏览器则正确显示。我将它的高度属性更改为最大高度，现在看起来很好。我找不到正确的解释来解释为什么会发生这种情况。有人可以在这里帮助我吗

在 IE 中不起作用的 CSS

.svglogo {
  height:70px;
}

有效的 CSS

.svglogo {
  max-height: 70px;
}

Answer 1

在 IE 11 中，对于 height 属性，不要在 pixels 中给出，而是在 % 中给出，如果有父元素，它也应该有一个在 % 中的高度，如果有链中的中断然后将无法正常工作。 Check this answer
您可以在您的 css 中为 ie 添加特定于浏览器的属性，并为该类提供max-height，这也将解决问题。

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     /* IE10+ CSS styles go here */
}

另外，请记住始终尝试输入% 或em，这样当浏览器调整大小时，徽标就不会变形。 你也可以试试这个：

.svglogo {
  height:70px !important;
}