为什么Opera不在文本中心而是在元素中心上对齐伪元素？

Question

查看this demo，您将看到除Opera之外的所有浏览器都将图标放在字母“A”的中间行上，但Opera将其定位在稍微高一点的位置。这里的差异并不明显，但在其他一些情况下则是。

这种行为可能是什么原因，以及如何解决？

Answer 1

说明

似乎虽然Opera目前正处理伪元素的inline-block垂直对齐或line-height定义（请参阅the former的参考测试和the later进行比较跨越UAs的渲染），区别在于被替换元素的大小定义;

通过检查不同浏览器上的striped down demo可以看出，仅仅具有替换元素（生成伪元素的content URL值）会影响布局，例如替换元素的维度被添加到包含元素'（在Opera中）。这会导致您目睹的奇怪副作用，因为现在，the spec将其留给UA解释，以决定如何对待这些维度：

  

注意。此规范未完全定义交互   ：before和：after with replacement elements（例如HTML中的IMG）。这个   将在未来的规范中更详细地定义。

建议的解决方案

避免处理未定义的行为，避免使用更标准的伪元素定位方法;利用绝对定位：

CSS

.icon {
    /* absolute positioning - parent container */
    position: relative;
    /* layer adjustments for the background image */
    z-index: 1;
    padding-left: 24px;
}
.icon:before {
    content: '';
    /* absolute positioning - child element */
    position: absolute;
    /* layer adjustments for the background image */
    z-index: -1;
    display: block;
    width: 24px;
    height: 24px;
    /* vertically align */
    top: 50%;
    left: 0;
    /* compensate for vertical offset due to element's own height */
    margin-top: -12px;
    background-image: url('http://utdallas.docutek.com/eres/images/icon_arrow.gif');
}

现场演示

• 的 The updated jsFiddle

参考

• Generated content - :before and :after pseudo elements关于W3C。
• Visual formatting model关于W3C。
• vertical-align在Mozilla开发者网络上。
• display在Mozilla开发者网络上。

进一步阅读

• CSS background image hacks Nicolas Gallagher 。