宽度适合的内容可在Chrome上运行，但不能在资源管理器上 [英] Width-fit content working on Chrome but not explorer

问题描述

我构建了一个应用程序，并且所有内容在Chrome浏览器中都能完美显示，但是如果我在Windows资源管理器中打开该应用程序，则容器的尺寸将变小.

I built an app and everything is displayed perfectly in Chrome, but if I open the app in Windows Explorer the containers are smaller than they should be.

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

I'm using width: fit-content. Is this something that only works with Chrome.

如何使它与所有浏览器兼容?

How can I make it so that it works with all browsers?

推荐答案

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

width: fit-content is still in experimental stages, and is currently supported on Chrome 46.x and above (without vendor prefix), FF 3.x and above (with vendor prefix). Not supported on either IE or edge.
You can refer to compatibility chart here: Browser compatibility for width:fit-content

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

One alternative is to use display: table, which has the same effect as width: fit-content. Of course, there are other ways that you can try depending on what your requirements are.

#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>

这篇关于宽度适合的内容可在Chrome上运行，但不能在资源管理器上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！