宽适合内容适用于Chrome但不适用于资源管理器

Question

我构建了一个应用程序,所有内容都在Chrome中完美显示,但如果我在Windows资源管理器中打开该应用程序,则容器会比应有的小.

我正在使用width: fit-content.这是否仅适用于Chrome.

我怎样才能使它适用于所有浏览器？

Answer 1

width: fit-content仍处于试验阶段,目前支持Chrome 46.x及更高版本(不含供应商前缀),FF 3.x及更高版本(带供应商前缀).IE或边缘都不支持.
您可以在此处参考兼容性图表:宽度:适合内容的浏览器兼容性

一种替代方案是使用display: table,其效果与之相同width: fit-content.当然,还有其他方法可以根据您的要求进行尝试.

#fit-content {
  width: fit-content;
  background: pink;
}

#table {
  display: table;
  background: lightblue;
}

#normal {
  background: green;
}

<div id="fit-content">
  <img src="https://upload.wikimedia.org/wikipedia/commons/d/d4/Wikipedesketch1.png"> fit-content
</div>
<div id="table">
  <img src="https://upload.wikimedia.org/wikipedia/commons/d/d4/Wikipedesketch1.png"> table
</div>
<div id="normal">
  <img src="https://upload.wikimedia.org/wikipedia/commons/d/d4/Wikipedesketch1.png"> normal
</div>

Answer 2

它可以完成，width:auto但仅当一个元素是display: inline-block以及将值设置为right:inheritor 时left:inherit。

例子：

.my_div {
    width: auto;
    display: inline-block;
    right:inherit; /* align to left */
}