Javascript “内联块”父元素的宽度错误

我正在使用一些HTML/CSS，它们使用大量的

显示：内联块
规则水平排列
元素。我追踪到一个JS bug，它是一个
$（“ol”）.width（）
错误地测量了元素的宽度-似乎是因为
内容的宽度

下面是一个问题示例：-请注意
元素的红色边框并没有完全围绕内容：


下面是一个示例，说明如何删除
内容上的宽度来固定我的
元素的大小：-请注意内容周围的红色边框是如何正确排列的

我不明白这里发生了什么-更改“孙子”宽度的规则怎么会对我的
元素的宽度产生如此显著的影响？这是一个浏览器错误还是符合标准？
您可能需要调整父元素和子元素的位置，以强制容器与它们一起增长。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 {
}

检查一下这个
可能不是一个浏览器错误，但可能是一个定义不充分的规范

似乎正在发生的是，li元素宽度的计算有多种解决方案。其宽度取决于其内容物（收缩以适合），其内容物宽度取决于其容器（100%）。从0到无穷大的任何值都有效

现在，对于ol元素，将应用收缩到拟合算法。从

收缩到拟合宽度的计算类似于使用自动表格布局算法计算表格单元的宽度。粗略地：通过格式化内容而不打断除显式换行以外的行来计算首选宽度，并计算首选最小宽度，例如，通过尝试所有可能的换行。CSS没有定义精确的算法。第三，找到可用宽度：在本例中，这是包含块的宽度减去使用的“左边距”、“左边距宽度”、“左边距”、“右边距”、“右边距宽度”、“右边距”和任何相关滚动条的宽度

然后收缩到适合的宽度为：最小（最大（首选最小宽度、可用宽度）、首选宽度）

使用David Baron的文字进行更详细的定义

本规范显然不适用于这种情况，但出于首选最小宽度的目的，似乎使用li宽度解决方案=0，而对于首选宽度，使用li宽度解决方案=img的固有宽度。这些选择对我来说似乎并不不合理，但我不知道规范的任何部分需要它们

假设您的示例中有这些值，ol元素的宽度就是可用宽度，这就是您所看到的

当然，li和img宽度不能在多个解决方案中渲染，并且没有任何约束li元素的宽度与其容器成比例，因此它们根据img元素的固有宽度进行渲染，溢出了他们的ol容器。
将宽度100%应用于具有“宽度自动”父元素的元素实际上没有意义。您试图通过设置img的宽度来实现什么？我看到你的li元素有一个最小宽度。也许您应该将img的最小宽度设置为100%？@Tatermelon-不幸的是，
元素只是示例内容-我现在所做的部分工作可能涉及将任意内容放入这些列表项中。因此，很难将CSS规则应用于
元素的内容。同样，这也是为什么我会担心这种行为：有人更改此列表中图像的宽度可能会打乱测量其大小的JS。不幸的是，您删除的一些规则很重要，例如最小宽度。您不能将其放回去吗？我删除它只是为了显示定位的骨骼。当我添加属性回处理
和
元素的宽度时：您是否查看过flex box中的此解决方案。我想给你们举个例子，但我的工作计算机使用的是一个旧的ie。它不支持flexbox。我很乐意，但这个组件需要针对太多的旧浏览器。实际上，我在这里寻找的是一个解释，从那里我将能够决定如何/是否需要积极重构。