css - margin-top 不适用于 :before

标签 css

我已经使用类的 :before 伪元素插入了内容。我试图使用 margin-top 定位此内容,但 firefox 只是忽略了该属性。代码如下:

.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 元素

最佳答案

看来 Darko Z 是对的。

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

假设,前两个测试用例(由 <hr> 分隔)应该呈现相同,它们在 Gecko 中(通过 FF3.5/Mac)呈现相同,但 Webkit(通过 Safari4/Mac)呈现 :before:after段作为内联。第三个测试用例似乎暗示 Webkit 当前需要阻止触发元素,以便阻止生成的内容。

规范并不清楚正确的行为是什么。可能值得在 www-style 上提出一个问题,看看哪个渲染引擎的行为是正确的,然后提交错误渲染引擎的错误,以便在未来的版本中修复它。请随意使用我的代码作为测试用例。

关于css - margin-top 不适用于 :before,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1169731/

相关文章:

android - 在 Android WebView 中从 CSS 文件加载背景图像

css - 无法让图像成为我想要的宽度

html - 如何为每个结果正确添加 animation.css?

javascript - 如何创建一个简单的 slider ?

css - 开发人员工具显示 CSS 我无法定位以进行编辑

html - 滚动时页脚不粘在页面底部

html - 使用 % 宽度、最小/最大宽度和 100% 高度的 float div(响应式)

jquery - 在其他 HTML 元素上使用 JQuery UI 样式

css - IE11 - CSS 变量是否存在 polyfill/脚本?

html - Bootstrap 容器上的HTML内容