3

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

为什么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;    
}
4

2 回答 2

0

似乎:before在 FF 上仅使用无表布局时效果很好。MDN 上有一些信息可能会有所帮助。

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

当我添加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;   
}

工作小提琴

有关更多信息，请访问MDN。

于 2013-09-23T12:52:36.273 回答
0

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

检查这个演示。

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

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

于 2013-09-23T11:49:05.247 回答