Question

我想将绝对定位的元素添加为表格行的:after（:before）。

我假设当我添加这样的元素渲染引擎（至少基于Webkit）时，认为它是某种表格单元格。

:before在所有浏览器中都很糟糕。但是：在Firefox中运行得非常好，在webkit中表现相当不错。在webkit中，它保留了较小的空间，使整个表格的宽度更大。

enter image description here - 这就是困扰我的webkit。

如何解决这个问题？我在哪里可以读到它为什么会发生？

更新1

可能的解决方案：将此行中的第一个表格单元格用作绝对定位元素的主机。

更新2

好的，我想我找到了解决我最初问题的方法。而且我认为可能会有更好的一个。但我想最大限度地使用CSS。问题是 - 使一些静态文本可编辑，如果用户点击其他任何地方 - 关闭此编辑模式。

Answer 1

在此示例中，您使用::after和::before伪元素在表行之前或之前添加内容，这实际上会破坏表格布局并导致不可预测的结果。

如果要将生成的内容添加到表格单元格中，结果将更加一致。

除了生成内容的原始规范之外，没有太多内容可供参考：

此外，请记住，CSS渲染引擎在创建表时会生成匿名框：

但是，由于生成的内容不是DOM的一部分，整个表格渲染过程可能无法以合理的方式处理额外的伪元素。

您正在深入研究未明确指定的区域，并且任何支持都将是特定于浏览器的。

根据您的布局要求，您可能需要使用JavaScript或jQuery将表的DOM更改为所需的效果。

Answer 2

使用第一个表格单元而不是该行作为绝对定位的伪元素的主机。

row > td:first-child::before {
  content: '';
  position: absolute;
  .
  .
}