除非容器具有固定宽度，否则 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 中，该 .box 设置为 flex-shrink 而不是 flex-grow。框旁边是 .fill，它设置为 flex-grow，但不是 flex-shrink。

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

该示例在 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 项目时 不需要定位 ()。

另一个可能的解决方案是将图像放在 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 */
}

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

SVG image not rendering properly in IE11 / Edge unless container has fixed width

html

css

internet-explorer

svg

microsoft-edge