`inline-block`父元素的宽度错误

Question

我正在使用一些HTML / CSS，它们使用大量<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 basic box model

  

计算收缩 - 拟合宽度类似于使用自动表格布局算法计算表格单元格的宽度。粗略地：通过格式化内容来计算首选宽度而不破坏显式换行发生之外的行，并计算首选最小宽度，例如，通过尝试所有可能的换行符。 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元素的位置以强制容器随之生长。 e.g。

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

查看此Fiddle