宽度：适合内容；在 Chrome 上工作但不在资源管理器上工作

Question

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

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

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

原文由 user9221735 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 Rocks 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

It can be done with width:auto but only when an element is display: inline-block as well as setting the value as right:inherit or left:inherit .

例子：

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

原文由 Harshada Samant 发布，翻译遵循 CC BY-SA 4.0 许可协议