我想将绝对定位的元素添加为:表格行的after(of:before)之后.
看看这个http://jsbin.com/IGumoye/5/edit
我假设当我添加这样的元素渲染引擎(至少基于Webkit)时,认为它是某种表格单元格.
:之前在所有浏览器中都很糟糕.但是:在Firefox中运行得很好,在webkit中几乎不错.在webkit中,它保留了小空间并使整个表宽度更大.
– 这是困扰我的webkit.
如何解决这个问题?我在哪里可以读到它为什么会发生?
更新1
可能的解决方案:使用此行中的第一个表格单元格作为绝对定位元素的主机.
http://jsbin.com/IGumoye/10/edit
更新2
好吧,我想我找到了解决我最初问题的方法.我认为可能会有更好的一个.但我想最大限度地使用CSS.问题是 – 使一些静态文本可编辑,如果用户点击其他任何地方 – 关闭此编辑模式.
解决方法
在此示例中,您使用:: after和:: before伪元素在表行之前或之前添加内容,这实际上将破坏表布局并导致不可预测的结果.
http://www.w3.org/TR/2009/CR-CSS2-20090908/generate.html#before-after-content
另外,请记住CSS渲染引擎在创建表时会生成匿名框:
http://www.w3.org/TR/2009/CR-CSS2-20090908/tables.html#anonymous-boxes
但是,由于生成的内容不是DOM的一部分,因此整个表格渲染过程可能无法以合理的方式处理额外的伪元素.
您正在深入研究未明确指定的区域,并且任何支持都将是特定于浏览器的.
根据您的布局要求,您可能需要使用JavaScript或jQuery将表的DOM更改为所需的效果.