Question

我最近偶然发现了一个问题，其中有人试图在其标题上获得正确的后退行为。像这样：

它们的实现在不同的标题中产生了不同的结果，因此问题。使用table表示元素，table-cell表示:before和:after，实现非常奇怪。由此产生的行为对我来说非常令人惊讶。我在jsfiddle上做了一个测试，看看。

你会看到我有两节课; a和b，前者的宽度为25％，后者的宽度为40％。尽管如此，b比a宽近5倍。将它们分别设置为40％和45％会使b成为a的两倍。这只是5％的差异，这是完全出乎意料的行为。文本的长度似乎也会影响到这一点。

我知道这个实现很糟糕，它会“破坏”。但是，我想知道为什么它打破了它的方式。这对我来说毫无意义。

div {
  display: table;
  background: grey;
  margin: 10px 0;
}
div:before,
div:after {
  width: 25%;
  position: relative;
  content: '';
  border-top: 2px solid black;
  display: table-cell;
}
div.b:before,
div.b:after {
  width: 45%;
}

<div class="a">text</div>
<div class="a">some more text</div>

<div class="b">text</div>
<div class="b">some more text</div>

Answer 1

标准没有指定自动表格布局，因此我建议不要使用这种百分比技巧，这可能会在某些浏览器中出现。

但是，似乎大多数浏览器的行为都是这样的：

::before和::after伪元素将占用表格的指定百分比。
文本包含在具有文本宽度的匿名单元格内。这将代表伪元素留下的剩余百分比。
表格的宽度将由上述约束决定。

因此，如果您有width: 25%，则文本将采用剩余的50%。

tablewidth = textwidth / 50% = 2 * textwidth
pseudowidth = 25% * tablewidth = 0.5 * textwidth

如果您有width: 40%，则文本将采用剩余的20%。

tablewidth = textwidth / 20% = 5 * textwidth
pseudowidth = 40% * tablewidth = 2 * textwidth

如果您有width: 45%，则文本将采用剩余的10%。也就是说，如果文本相同，表格的宽度将相对于前一种情况加倍。

tablewidth = textwidth / 10% = 10 * textwidth
pseudowidth = 45% * tablewidth = 4.5 * textwidth

当然，如果如上所述计算的所需表格宽度超过包含块，则事情开始变得棘手。然后

该表格与包含块
文本单元格将具有解析伪元素留下的剩余百分比的宽度。这将小于文本的首选宽度，因此文本将换行多行。

但是，文本单元格不会比文本的最小所需宽度窄。这通常是最长字的宽度，但可能由于例如word-break: break-all或white-space: nowrap。
文本留下的剩余空间将平均分配在伪元素中。

如果剩余空间为负，则伪元素将具有0宽度，并且表将增长（溢出包含块）以补偿该值。

表格和表格单元格上的奇怪行为，百分比宽度

1 个答案: