如何在与<h1>行高相关的标签中调整 SVG 图像的大小？

Question

在Chrome/iOS/Firefox中似乎都很好，但是IE10/11没有将SVG-image正确对齐以便于文本。

我已经阅读了http://caniuse.com/#search=svg并尝试了一些东西，但我没有在IE10/11上工作。

这是一个JSFiddle

<h1>
  <img src="http://www.kunkel-dienstleistungen.com/dev/img/logo.svg" alt="Logo">
  Kontakt
</h1>
<div>
  Text

h1 {
  font-size: 3vw;
  font-weight: 400;
  letter-spacing: 0.3vw;
  margin: 5vw auto 2.5vw 2vw;
  padding: 0;
  position: relative;
  width: 100%;
}
h1 > img {
  display: inline;
  height: auto;
  margin: 0 2vw 0 0;
  max-height: 1em;
  width: 4vw;
}

在IE10/11上你会看到错误的对齐方式和比例

Answer 1

设置图像div的max-height和max-width如下所示，它应该工作。我试着用ie10来摆弄它，它工作了。

    h1 {
        font-size: 3vw;
        font-weight: 400;
        letter-spacing: 0.3vw;
        margin: 5vw auto 2.5vw 2vw;
        padding: 0;
        position: relative;
        width: 100%;
    }
    h1 > img {
        display: inline;
        margin: 0 2vw 0 0;
        max-height: 4vw;
        max-width: 4vw;
    }