Question

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

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

如何才能使其适用于所有浏览器？

Answer 1

width: fit-content目前仍处于试验阶段，目前支持Chrome 46.x及更高版本（无供应商前缀），FF 3.x及更高版本（带供应商前缀）。 IE或边缘都不支持。
您可以在此处参阅兼容性图表：Browser compatibility for width:fit-content

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

＆＃13;

#fit-content {
  width: fit-content;
  background: pink;
}

#table {
  display: table;
  background: lightblue;
}

#normal {
  background: green;
}

＆＃13;

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

＆＃13;

Answer 2

另一种替代方法是使用@HostListener('keydown', ['$event']) open(event: KeyboardEvent) { if (event.altkey) { console.log('Alt key pressed'); event.stopPropagation(); event.preventDefault(); } } 有时这可行，但这取决于您的具体情况。

Answer 3

可以使用width:auto完成此操作，但仅当元素为display: inline-block并将值设置为right:inherit或left:inherit时才能完成示例：

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

Answer 4

有类似的问题。在一个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 5

192.168.0.14 : example.com 192.168.0.15 : foobar.com 192.168.0.19 : test.com为我工作

Answer 6

我有一个类似的问题，用这种方法解决了。您可以使用下面的代码段来代替使用Here, the value: 1.0 Here, the value: 1.0。

inline-flex得到了很好的支持（即使在IE11上也是如此）。

在下面的示例中，width: fit-content;仅在将父级设置为flex: none;时有用。

display: flex;

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

6 个答案: