html - 除非容器具有固定宽度，否则 SVG 图像无法在 IE11/Edge 中正确呈现

Question

Edge 和 Internet Explorer 11 似乎缩放 SVG 图像与常规光栅图像不同。

看看下面的例子:

.container {
  display: flex;
  flex-flow: row nowrap;
}

.box {
  flex: 0 1 auto;
  background: red;
}

.fill {
  flex: 1 0 auto;
  background: green;
}

.box img {
  display: block;
  width: auto;
  height: 150px;
  background: blue;
}

<div class="container">
  <div class="box">
    <img src="http://s33.postimg.org/hbl2jy69b/logo_light.png" alt="" />
  </div>
  <div class="fill">fill</div>
</div>
<div class="container">
  <div class="box">
    <img src="http://imgh.us/logo-light_1.svg" alt="" />
  </div>
  <div class="fill">fill</div>
</div>

两个图像是相同的，第一个是 PNG，另一个是 SVG。两个图像都位于 .box 中，该框设置为 flex-shrink 但不是 flex-grow。框旁边是 .fill，它设置为 flex-grow，但不是 flex-shrink。

所以，这个想法真的很简单。我们将每个图像的高度设置为某个固定值，宽度会自动计算以保持图像的纵横比，这恭敬地设置了 .box 容器的宽度。 .fill 占据剩余的可用空间。

该示例在 Chrome 和 Firefox 中都运行良好，并且显示了两个相同的图像:

然而，在 Edge 中，图像被裁剪了:

在 IE 中更奇怪的地方:

您可以在此处查看 SVG 的来源:http://imgh.us/logo-light_1.svg

我还为 SVG 的 preserveAspectRatio 属性尝试了几个不同的值，结果都不同，但仍然不是我真正想要的。

我错过了什么吗？这只是一个适当的 preserveAspectRatio 属性的问题还是一个错误？

Answer 1

正如您所注意到的，图像容器上的固定宽度使其在 IE11 上工作。

这对我有用:

.box {
    flex: 0 1 461px;   /* changed flex-basis from auto */
    background: red;
}

如果这不是一个选项，而您只是希望 PNG 和 SVG 匹配，那么正的 z-index 值会将蓝色背景移动到表面。

.box {
    flex: 0 1 auto;
    background: red;
    z-index: 1;        /* new */
}

请注意，z-index 在应用于 flex 元素时不需要定位(reference)。

---

另一种可能的解决方案是将图像放在 flex 容器中，然后定义图像的 width(与 height 相对):

.box {
  flex: 0 1 auto;
  background: red;
  display: flex;      /* new */
}

.box img {
  /* display: block; */
  /* width: auto; */
  /* height: 150px; */
  background: blue;
  width: 332px;     /* new; value can be anything, PNG and SVG will match */
}