Html 为什么带位置的嵌套div：绝对渲染时会使用“收缩到适合”的苛刻解释？_Html_Css

Html 为什么带位置的嵌套div：绝对渲染时会使用“收缩到适合”的苛刻解释？

html css

Html 为什么带位置的嵌套div：绝对渲染时会使用“收缩到适合”的苛刻解释？,html,css,Html,Css,如果一个页面上有两个绝对定位的div，其中最里面的内容应该呈现为表格，那么Firefox 3.6.x&4.x、Chrome 13.x和Opera 11.x都会采用压碎内容的方法测试用例： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1

如果一个页面上有两个绝对定位的div，其中最里面的内容应该呈现为表格，那么Firefox 3.6.x&4.x、Chrome 13.x和Opera 11.x都会采用压碎内容的方法

测试用例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Nested Absolutes</title>
  </head>
  <body>
    <div style=" position: absolute; background-color: green;">
      <div style="position: absolute;">
        <div style="display: table;">
          <div style="display: table-column; width: 15px;"></div>
          <div style="display: table-column;"></div>
          <div style="display: table-row;">
            <div style="display: table-cell; background-color: blue;"></div>
            <div style="display: table-cell;">
              Banana Fritter
            </div>
          </div>
          <div style="display: table-row;">
            <div style="display: table-cell; background-color: red;"></div>
            <div style="display: table-cell;">
              Cherry Pie
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>


嵌套绝对
炸香蕉
樱桃派

预期输出（[C]表示一块颜色C）：

[B] 香蕉煎饼
[R] 樱桃派

将生成渲染输出：

香蕉
油条
樱桃
馅饼

显式样式宽度为15px的div已从视图中删除，任何文本上下文都不必要地应用了换行符

如果其中一个外部div的位置更改为“相对”，则内容的布局将恢复为预期的布局

为什么使用两个嵌套的、绝对定位的div会促使浏览器的布局引擎渲染子div，而忽略提供的样式，并将内容强制放入尽可能小的空间

**更新**

一个避免表（）复杂性的简单示例：


嵌套绝对
炸香蕉

预期产出：

香蕉馅饼

渲染输出：

香蕉

Fritter

带有position:absolute的元素从页面的正常流程中取出，并定位在相对于其包含块的所需坐标处

由于绝对定位的元素从正常流中取出，正常文档流的行为就好像元素不在那里一样：它关闭了它将占用的空间。

您将不会得到绿色背景，因为`；是“空的”：是唯一的孩子在绝对位置，也就是“不在那里”

这些单词是扭曲的，因为您的表位于一个没有空间的元素中（默认情况下，表占用的空间）。这就像强制一个“

宽度：0%

”。因为同样的原因，你不会得到任何蓝色或红色

以下将产生类似的输出：

<div style="width:0px; height:0px">
    <div style="display: table;">
      <div style="display: table-row;">
        <div style="display: table-cell; background-color: blue;"></div>
        <div style="display: table-cell;">
          Banana Fritter
        </div>
      </div>
      <div style="display: table-row;">
        <div style="display: table-cell; background-color: red;"></div>
        <div style="display: table-cell;">
          Cherry Pie
        </div>
      </div>
    </div>
</div>


炸香蕉
樱桃派

谢谢你的提问：）

我不知道这背后的确切科学，但我认为这是一个普遍规律。它可能在W3C规范的某些部分中很深

桌子首先，元素崩溃是因为它们没有内容。以我的名字为例：

只需在空div中添加一个

，即可显示所选的

背景色。通常，表上的列的宽度仅与最宽的表单元格的宽度相同，因此这可以解释为什么您看不到任何内容。即使设置宽度也不意味着这些单元的渲染。没有内容。这是这里的关键要素
双绝对
我不知道为什么内容会崩溃，但这有点道理。doubleabsolute
div
似乎失去了宽度。父级div
没有定义的宽度，因此内部div
似乎也失去了宽度。然而，我想不出这种加价方式会有什么好处
例如，它们都是绝对定位的，因此您可以将它们分开，如下所示：
<div style="position:absolute">Content 1</div> 
<div style="position:absolute">Content 2</div>

内容1
内容2

我认为你所建议的情况没有必要，这不能用另一种方法来完成。这里一切似乎都很好。
要模拟一张桌子，需要跳出很多圈圈。我知道咒语是“不要使用表”，但每个人都忘记了整个咒语：“不要将表用于布局”。如果您表示的是表格数据，请继续使用表。该示例旨在说明意外的渲染情况，而不是作为讨论的焦点来平衡美味甜点的结构和风格。如果你用一个例子来说明，那么你可能会得到更多的回应。谢谢你的建议，@Stephen：输出结果将与常规表格相同（…
）。如果只给一个包含div的元素指定了“相对”位置，则剩下一个包含div的元素是绝对的，超出了正常流程，尽管剩余的绝对位置元素占用了“无空间”，但它将被正确渲染。叉形小提琴（绝对，相对）和（相对，绝对）。这个答案说明了这一点吗？for（绝对、相对）：表位于位置：relativediv：它可以调整大小以显示其内容。For（relative，absolute）：相对div为空，所有内容都在绝对div中，绝对div也会调整大小以显示其内容。在（绝对，绝对）情况下：您的表位于绝对div中，而绝对div位于空div中，因此没有空间调整大小。我希望我有足够的道理：在（相对，绝对）情况下，相对div是空的，因为内部绝对div已将内容从相对div的正常流中移除。在（绝对，绝对）情况下，第二个绝对div还将内容从第一个div的正常流中删除。这两种情况都会导致外部div的大小为零，这对内部div的渲染有何影响？在（相对，绝对）中，绝对div有空间存在（外部div为空，但它存在）。不在（绝对、绝对）情况下（外部div与上下文无关）。因此，呈现方式不同。根据您的推理，有些表格单元格始终没有内容，因此无论它们出现在何处或样式如何，它们都必须折叠，这与我们看到的情况不同。它们没有内容，因此
<div style="position:absolute">Content 1</div> 
<div style="position:absolute">Content 2</div>