css - :before in tables vs divs的绝对定位

Question

我使用 :before 添加一个伪元素，并将其绝对定位到其父元素(可以是表格或 div)。出于设计目的，父级还必须有 20 像素的边框。

为什么firefox和IE不一致，并且对表格中伪元素的定位有不同的处理方式？

请看看我的jsFiddle或下面的代码。

已使用 IE10、Chrome29 和 FF23 进行测试。

HTML:

<div>i am a div</div>

<table>
<thead>
    <tr><th>header 1</th><th>header 2</th></tr>
</thead>
<tbody>
    <tr><td>entry 1</td><td>entry 2</td></tr>
</tbody>
</table>

CSS:

table,
div {
   border: 20px solid yellow;
   position: relative;
   margin-bottom: 30px;
   height: 50px;
}

table:before,
div:before {
   background: red;
   content: " ";
   position: absolute;
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   width: 10px;
   height: 10px;    
}

Answer 1

似乎是 Firefox 如何处理表格中绝对定位元素的问题。您可以尝试将 div 和 table 包装在它们自己相对定位的父 div 中吗？

检查这个DEMO .

编辑:如果无法修改 html 结构，请尝试指定元素 box-sizing: border-box;。

这个DEMO似乎可以在我的机器上的 Chrome、FF 和 IE 中运行。如果它没有渲染，请告诉我，我会再试一次。