`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 {
}

看看这个小提琴