margin-top在:before中无效

Question

我使用:before伪元素为一个类插入了内容。我尝试使用margin-top来定位这个内容，但是火狐浏览器会简单地忽略该属性。代码如下：

.bef {
  line-height: 2em;
  white-space: nowrap;
  font-size:24px;
  display: block;    
  }

.bef:before {
  display: block;
  margin-top:2em;
  padding: 0;
  color: #666666;
  content:"Hello";    
  }

有人知道为什么Firefox可能会忽略margin-top属性吗？

编辑：虽然margin-top完全被忽略了，但是margin-bottom:-Xem有效，我可以移动:before元素

- KJ Saxena

Answer 1

尝试将`.bef`的显示设置为块级元素？我猜测`:before`的容器元素需要是块级元素，以便它可以监听`margin-top`...

- Darko

Answer 2

看起来Darko Z是正确的。

http://jquery.nodnod.net/cases/577

假设情况下，前两个测试用例（由<hr>分隔）应该呈现相同，这在Gecko（通过FF3.5/Mac）中确实如此，但是Webkit（通过Safari4/Mac）将:before和:after段呈现为内联。第三个测试用例似乎意味着Webkit目前需要触发元素为块状才能使生成的内容为块状。

规范对正确行为没有明确说明。可以在www-style上提出问题，以查看哪个渲染引擎的行为是正确的，然后向有错误渲染引擎提交bug，以便在未来版本中进行修复。请随意使用我的代码作为测试用例。

- c_harm

---

margin-top不起作用的原因是当元素display:inline时，垂直margin和padding不会被应用。 - chuckharmston

好的，那有没有办法改变显示属性呢？我已经声明了 .bef 和 .bef:before 选择器为 display:block（请参见上面编辑过的代码）。但 margin-top 仍然被忽略了。 - KJ Saxena