寬度：適合內容； 在 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對我有用