`inline-block`父元素的寬度錯誤

Question

我正在使用一些HTML / CSS，它們使用大量display:inline-block水平排列<li>元素display:inline-block規則。 我已經跟蹤了一個JS錯誤到$("ol").width() ，它錯誤地測量了元素的寬度 - 看似是因為<li>內容的寬度？

以下是問題的一個示例： http ： //jsfiddle.net/q01ng8b6/ - 請注意<ol>元素的紅色邊框不會一直圍繞內容：

下面是一個示例，說明如何刪除<li>內容的寬度來修復我的<ol>元素的大小： http ： //jsfiddle.net/q01ng8b6/1/ - 請注意正確的紅色邊框是如何完全的內容。

我不明白這里發生了什么 - 改變“孫子”寬度的規則如何才能對我的<ol>元素的寬度產生如此明顯的影響？ 這是瀏覽器錯誤還是標准兼容？

Answer 1

可能不是瀏覽器錯誤，但可能是一個不完全嚴格定義的規范。

似乎正在發生的是，li元素寬度的計算有多種解決方案。 它的寬度取決於其內容（收縮 - 合適），其內容寬度取決於其容器（100％）。 從0到無窮大的任何值都可以。

現在，對於ol元素，縮小到擬合算法適用。 來自CSS基本框模型

收縮 - 擬合寬度的計算類似於使用自動表格布局算法計算表格單元格的寬度。 粗略地：通過格式化內容來計算首選寬度，而不會破壞除顯式換行之外的行，並計算首選最小寬度，例如，通過嘗試所有可能的換行符。 CSS沒有定義確切的算法。 第三，找到可用的寬度：在這種情況下，這是包含塊的寬度減去'margin-left'，'border-left-width'，'padding-left'，'padding-right'的使用值， 'border-right-width'，'margin-right'，以及任何相關滾動條的寬度。

然后，收縮配合寬度為：min（最大（優選最小寬度，可用寬度），優選寬度）。

使用David Baron的文本更詳細地定義。

對於這種情況，規范顯然是不合適的，但似乎出於優選的最小寬度的目的，使用li寬度溶液= 0，而對於優選的寬度，使用li寬度解決方案= img的固有寬度。 這些選擇對我來說似乎並不合理，但我不知道需要它們的規范的任何部分。

假設您的示例具有這些值，ol元素的寬度是可用寬度，這就是您所看到的。

當然，li和img寬度不能在多個解決方案中呈現，並且沒有任何約束li元素的寬度與其容器成比例，因此它們根據img元素的內部寬度進行渲染，溢出它們的ol容器。

Answer 2

您可能必須調整parent和children元素的位置以強制容器隨之生長。 例如

.my-horizontal-ul {
    border:1px solid red;
    margin:0;
    padding:0;
    list-style:none;
    white-space:nowrap;
    position:absolute;
}
.my-horizontal-ul li {
    display:inline-block;
    position:relative;
}
.my-horizontal-ul li img {
}

看看這個小提琴