css - Opera が疑似要素を text-center ではなく element-center に配置するのはなぜですか?

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

参考文献

• 生成されたコンテンツ -:beforeおよび:afterW3Cの疑似要素。
• W3C のビジュアル フォーマット モデル。
• vertical-alignMozilla Developer Network で。
• displayMozilla Developer Network で。

参考文献

• Nicolas GallagherによるCSS 背景画像ハック。