Question

我正在添加一个带有:before的伪元素，并将其绝对定位到其父级，可以是表格或div。出于设计目的，父母也必须有20px的边框。

wwhy是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＆amp; IE在我的机器上。如果它没有渲染，请告诉我，我会再拍一次。

Answer 2

似乎:before只适用于FF上的表格较少的布局。有关MDN的一些信息可能会有所帮助。

尽管Firefox 3.5中的定位修复不允许将内容生成为单独的先前兄弟（根据CSS规范说明“：之前和之后：伪元素元素与其他框架交互...”就好像它们一样是真实元素插入其关联元素内部。“），它们可用于对无表格布局进行略微改进（例如，实现居中）

当我将display: block添加到表格元素并删除固定高度时，它工作正常。

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

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

Working Fiddle

有关详情，请浏览MDN。

绝对定位：在表格与div之前

2 个答案: