html - 为什么表格布局是: fixed affecting the width of the parent element?

Question

有人可以解释为什么我的 div 和 table-layout:fixed 正在改变其父元素的宽度(在本例中为 body)将其设置为 100% 而它不应该是 100%，因为它已定位？

body {
  border: 2px solid red;
  height: 100vh;
  margin:0;
  padding: 0;
  position: absolute;
}

.c{
  display: table;
  width: 80%; /* Any percentage value different from 0 */
  table-layout:fixed;
  outline: 2px solid blue;
}

<div class="c">d</div>

正如您在上面看到的，添加 table-layout:fixed 强制正文为全宽以及 div 上的百分比 width将相对于 body 的 width 起作用!

下面的代码片段不是这种情况，其行为在某种程度上是符合逻辑和直观的:

body {
  border: 2px solid red;
  height: 100vh;
  margin:0;
  padding: 0;
  position: absolute;
}

.c{
  display: table;
  width: 80%;
  /* table-layout:fixed; */
  outline: 2px solid blue;
}

<div class="c">d</div>

table-layout:fixed 如何影响在这种情况下定位的父元素？

---

作为旁注，使用具有 width 的像素值会产生合乎逻辑的结果:

body {
  border: 2px solid red;
  height: 100vh;
  margin:0;
  padding: 0;
  position: absolute;
}

.c{
  display: table;
  width: 200px; 
  table-layout:fixed;
  outline: 2px solid blue;
}

<div class="c">d</div>

我们还可以通过这种奇怪行为产生一些溢出:

body {
 margin:0;
 position:relative;
 width:300px;
 border-top:20px solid green;
}

.container {
  border: 2px solid red;
  height: 100vh;
  position: absolute;
}

.c {
  display: table;
  width: 120%; 
  table-layout: fixed;
  outline: 2px solid blue;
  animation:change 2s linear infinite alternate;
}

@keyframes change {
  from{width:1%;}
  to {width:150%}
}

<div class="container">
  <div class="c">d</div>
</div>

Answer 1

看起来像you're not the first to bring this up .不过，你可能是第二个。

需要明确的是，这是两个问题的组合:

1. The width of an absolutely positioned element is shrink-to-fit.不知何故，收缩以适应宽度被确定为与放弃元素的包含 block 允许的一样宽。 (绝对定位的 body 的包含 block 是初始包含 block 。)

2. A percentage width on an element whose containing block depends on its contents for auto sizing results in undefined behavior.

第 2 期是 pretty easy to write off :

implementations agree not to calculate the width of either element more than once.

即body 使用 shrink-to-fit 调整大小，然后表格设置为该宽度的 80%，body 的大小为 "not computed again" .唯一的“未定义”是规范不要求或不允许，或者实际上不关心实现的作用。

因此，问题归结为为什么在 #2 中确定表的大小之前收缩以适合在 #1 中产生“尽可能宽”。以下是规范如何描述放弃元素的收缩以适合:

[...] Roughly: calculate the preferred width by formatting the content without breaking lines other than where explicit line breaks occur, and also calculate the preferred minimum width, e.g., by trying all possible line breaks. CSS 2.1 does not define the exact algorithm. Thirdly, calculate the available width: this is found by solving for 'width' after setting 'left' (in case 1) or 'right' (in case 3) to 0.

Then the shrink-to-fit width is: min(max(preferred minimum width, available width), preferred width).

但这并没有告诉我们为什么，甚至那个，固定布局表的首选宽度是“与其包含 block 允许的一样宽”。 css-sizing-3 和 css-tables-3 似乎都没有包含答案。

根据 David Baron (来自同一线程)，他在 Gecko 上工作:

Fixed-layout tables report an intrinsic max-content inline size as infinite.

(请注意，“最大内容内联大小”与“首选宽度”的含义相同)

这就是我们的答案。与自动布局表相比，固定布局表的无限最大内容内联大小是导致此表的绝对定位父级被拉伸(stretch)到其自身包含 block (初始包含 block )允许的宽度的原因。

而且，至少就目前而言，这与我获得的官方消息来源一样接近，因为我无法通过阅读 css-sizing-3 得出相同的结论，而且我不确定 David 的声明是否正确仅基于 Gecko 的行为、所有实现的行为或指定的行为。