5

Chrome 10w/でかなり奇妙なことが見られます:first-child:before。

このHTMLで

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

<ul>
    <li>Four</li>
    <li>Five</li>
    <li>Siz</li>
</ul>

そしてこのCSS

ul {
    list-style-type: none
}

li:before {
    content: "* "
}

li:first-child:before {
    content: ""
}

<li>Four</li>Win XPSP3のChrome10.0.648.204でアスタリスクを付けてレンダリングする理由を誰かが説明できますか？http://jsfiddle.net/MxtHm/を参照してください

しかし、CSSをに変更すると

ul {
    list-style-type: none
}

li:before {
    content: "* "
}

li:first-child {
    background: none
}

li:first-child:before {
    content: ""
}

<li>Four</li>アスタリスクなしでレンダリングします。http://jsfiddle.net/SGRej/を参照してください

Safari5.0.4とFirefox3.6.16は、両方の例を同じようにレンダリングします。私はMeyerの本とCSS仕様の両方を調べて、運がなくても説明を探しましたが、CSSバリデーターはCSSについて不平を言っていません。

非常に奇妙なことは、Chromeで要素を検査すると、がルールli:first-child:beforeをオーバーライドしていることを示していることです。li:before

JSFiddleはXHTML1.0Strict DOCTYPEを使用していますが、これはHTML5DOCTYPEでも見られます。

ありがとう。

2011-04-28編集：これは、他の同様の疑似要素関連の問題とともに、Chrome11.0.696.57で修正されたようです。

4

1 に答える 1

9

私が答えたこの前の質問と同じ問題に悩まされていることは間違いありません。

last-child:Chrome でレンダリングしなかった後? 擬似要素の使用の問題?

私はそれがバグであるという明らかな真実を理解し、それを確認するいくつかのバグレポートを見つけました.

他の誰かが奇妙な回避策を見つけました。受け入れられた回答を参照してください。

于 2011-04-04T13:52:10.197 に答える