IE 中的 CSS inline-block 和 width-auto 不正确答案

【问题标题】：CSS inline-block and width-auto incorrect in IEIE 中的 CSS inline-block 和 width-auto 不正确
【发布时间】：2015-10-06 07:10:26
【问题描述】：

所以我在 Internet Exlporer 9-11 和 EDGE (Spartan) 中有这种奇怪的行为。

现在在所有浏览器中，我都看到了这样的示例（这是所需的）：

在 Internet Explorer 中，我看到它是这样的：

在我除了 Firefox 之外几乎到处都有这些东西之前，直到我添加：

svg {
    width: auto !important;
}

这个问题无处不在，除了 IE...

这是您可以调整的工作简化示例： http://codepen.io/failure13/pen/waxaOx

我自己不知道，我完全不知道 IE 在这里的行为和计算宽度：auto;基于什么价值观... 我一直认为它应该是父级或元素高度本身。

我现在尝试了所有出现在我脑海中的东西。我看不出任何逻辑，所以这似乎是一些令人讨厌的错误。

如果是这样，也许有解决方法？我真的需要它，因为我真的不想使用固定宽度值（当然它会解决问题，但这不是解决方案）。

提前感谢所有可能提供帮助的人，让我们让网络变得更好！

【问题讨论】：

您是否将作为元描述的第一行？
不，这个元是什么意思？
阅读本文modern.ie/en-us/performance/how-to-use-x-ua-compatible
哦，很高兴知道！谢谢小费！但这对我的问题没有帮助:(
您最好将图像（最好是 png，优化 - 尝试 tinypng.com）调整为标题的百分比，而不是使其宽度 svg 宽度 100% 您的图像显然是 300 像素宽处于原始状态。我认为这就是导致问题的原因

【解决方案1】：

在你的课堂上

.svg-flex {
    width: auto;
    height: 100%;
    display: block;
}

将width 更改为max-width:72px; 无论如何，这适用于ie 11。我检查了

【讨论】：

当然，它适用于任何地方，就像 svg 元素本身的硬编码宽度一样！）但遗憾的是它不是一个选项，因为 max-width 不应该是硬编码的，这是我想要控制它的唯一方法整个情况是在父div上设置高度......所以我需要像百分比或无单位或最大宽度规则中的ems之类的东西，这等于父div的高度......我可以做一些像height：0;填充顶部：100%；技术，但可悲的是 svg 可能具有非正方形比例，因此我只需要 width: auto 即可在 ie 中工作，而不会因为巫术原因使其高 x4.16 倍......
基本上我需要了解甚至现代 IE 威胁这个 svg 宽度的原因：自动；因为内容会比现实多得多，它从哪里获得这些额外的数字？我试图重新设置从字体大小和行高到填充、边距、边框等的所有内容（这似乎是合乎逻辑的，因为盒子模型不一致通常会增长）但我找不到答案..