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

Question

我构建了一个应用程序，所有内容都在 Chrome 中完美显示，但如果我在 Windows Explorer 中打开该应用程序，容器比它们应该的要小。

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

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

Answer 1

width: fit-content仍处于试验阶段，目前支持 Chrome 46.x 及以上（无供应商前缀）、FF 3.x 及以上（有供应商前缀）。 IE 或 Edge 都不支持。
您可以在此处参考兼容性图表： 宽度的浏览器兼容性：适合内容

一种替代方法是使用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:inherit或left:inherit 。

示例：

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

Answer 3

有类似的问题。 在一个 div 中，让其他人使用display:inline-block

对于父 div 使用white-space : nowrap;

不要忘记设置为孩子的 div white-space : normal;

.parent {
    width: max-content;
    white-space : nowrap;
}
.parent .child {
    display: inline-block;
    white-space : normal;
}

HTML 示例

<div class='parent'>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
</div>

Answer 4

另一种选择是使用width:auto; 这有时有效，但这取决于您的具体情况。

Answer 5

我有一个类似的问题，以这种方式修复它。 而不是使用width: fit-content; 您可以使用下面的代码段。

inline-flex得到很好的支持（即使在 IE11 上）。

在下面的例子中， flex: none; 仅当父项设置为display: flex;时才有用display: flex; .

.element {
  display: inline-flex;
  flex: none;
  width: auto;
}

Answer 6

操作。 我的答案是在 4 年后出现的。

我在构建移动页面时遇到了width: fit-content; . 下面的代码对我有用：

header nav ul {
   display: table;
   margin: 0 auto;
}

Answer 7

display: inline-table对我有用