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

Question

查看此演示，您会看到除 Opera 之外的所有浏览器都将图标定位在字母“A”的中间行，但 Opera 将其定位在略高的位置并超过该行。此处的差异并不明显，但在其他一些情况下确实如此。

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

Answer 1

解释

看起来，尽管 Opera 目前在inline-block垂直对齐或line-height伪元素定义方面处理得很好（参见前者和后者的参考测试以比较跨 UA 的渲染），但区别在于替换元素的大小定义；

通过检查不同浏览器上的条带化演示可以看出，仅具有替换元素（由伪元素的contentURL 值生成）会影响布局，例如将替换元素的尺寸添加到包含元素（在 Opera 中）。这会导致您目睹的奇怪副作用，因为目前，规范将其留给 UA 的解释来决定如何处理这些维度：

笔记。该规范没有完全定义 :before 和 :after 与替换元素的交互（例如 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');
}

现场演示

• 更新的 jsFiddle

参考

• W3C 上生成的内容:before和:after伪元素。
• W3C 上的视觉格式化模型。
• vertical-align在 Mozilla 开发者网络上。
• display在 Mozilla 开发者网络上。

延伸阅读

• Nicolas Gallagher的CSS 背景图像 hack。