html - 适用于 Chrome 但不适用于资源管理器的宽度适合内容

Question

我构建了一个应用程序，一切都在 Chrome 中完美显示，但是如果我在 Windows 资源管理器中打开应用程序，容器会比它们应该的小。

我正在使用 width: fit-content .这是仅适用于 Chrome 的东西吗？

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

Answer 1

width: fit-content仍处于试验阶段，目前支持 Chrome 46.x 及更高版本(无供应商前缀)、FF 3.x 及更高版本(有供应商前缀)。 IE 或 Edge 都不支持。
您可以在此处引用兼容性图表:Browser compatibility for width:fit-content

一种替代方法是使用 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>