如何确定嵌套绝对定位元素的宽度？

Question

示例：

<style>
     div {
         position:absolute; left:auto; right:auto; width:auto;
         margin:0; padding:0; border:0;
     }
</style>
<div id="containingBlock">
    foo
    <div id="inner">this is my text</div>
</div>

要确定两个div的宽度，我们需要http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width *

中的 shrink-to-fit 算法

让我们从#inner开始：

• 获取首选最小宽度

   this
   is
   my
   text
  |----| preferred minimum width
  

• 获取首选宽度

   this is my text
  |---------------| preferred width
  

• 将两者与可用宽度进行比较：

  computed width = min(max(preferred minimum width, available width),
                       preferred width)
  

  易。但是什么是可用宽度？由于我们没有边距/填充/边框，因此它只是containingBlock的宽度。但现在我们得到一个无限循环，因为同样的算法再次应用：

• 获取containsBlock的首选最小宽度

   foo
   +-------+
   | inner |
   +-------+
  |--?????--| preferred minimum width
  

换句话说：要获得inner的宽度，我们必须知道containingBlock的宽度，反之亦然。

实际上，在这种情况下，浏览器似乎只假设available width = 0：http://jsfiddle.net/pxvJJ/6/。 但这不是规格所涵盖的，或者我错过了一些明显的东西？

* _{（请注意，此规范尚未被CSS3取代）}

Answer 1

如果我们仔细阅读规范，我们会find that

  

CSS 2.1没有定义精确的[shrink-to-fit]算法。

应该是

  

类似于使用自动表格布局算法计算表格单元格的宽度

反过来，is implementation-dependent。

因此，上面的示例显示，在实现直接算法时，从containsBlock的首选最小宽度的计算中排除#inner可能是一个好主意，我们最终会有了这个：

|---| preferred minimum width
 foo
 +-------+
 | inner |
 +-------+
|--?????--|

这可能是浏览器的作用。

---

话虽如此，问题是：哪些元素做实际上有助于containsBlock的首选最小宽度？

让我们看看如果#inner有position:static; width: auto会发生什么。这个案子更难。同样，the specs给出了约束

  

'margin-left'+'border-left-width'+'padding-left'+'width'+'padding-right'+'border-right-width'+'margin-right'=包含的宽度块

这次不允许收缩。而且，它再次无法解决。或者可以吗？有趣的是，它可以！让我们看看实际发生了什么：http://jsfiddle.net/pxvJJ/12/

显然，静态定位的div被区别对待。所以我认为确定包含块宽度的算法是这样的：

1. 确定所有包含的阻止框在正常流程中的首选宽度 。
2. 设置包含块的宽度=这些首选宽度的最大值
3. 计算所有包含的框的宽度，现在已知包含块的宽度

我仍然对为什么（所有）浏览器这样做感到困惑。在这方面似乎没有理由不同地处理绝对定位的元素。