Странное поведение с CSS :first-child:before в Chrome

Я вижу что-то довольно странное в Chrome 10 с :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> отображается со звездочкой в ​​Chrome 10.0.648.204 в Win XP SP3? См. 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/.

Safari 5.0.4 и Firefox 3.6.16 отображают оба примера одинаково. Я безуспешно просмотрел книгу Мейера и спецификацию CSS в поисках объяснения, и валидатор CSS не жалуется на CSS.

Крайне странно то, что если я проверяю элемент в Chrome, он показывает, что li:first-child:before переопределяет правило li:before.

JSFiddle использует XHTML 1.0 Strict DOCTYPE, но я также вижу это с DOCTYPE HTML5.

Спасибо.

РЕДАКТИРОВАТЬ 28 апреля 2011 г.: похоже, это было исправлено в Chrome 11.0.696.57, наряду с другими подобными проблемами, связанными с псевдоэлементами.


person mpdonadio    schedule 04.04.2011    source источник
comment
Chromium 12.0.712.0 (79102) в Ubuntu 10.10 не отображает это ошибочное поведение, поэтому, возможно, было зафиксировано исправление этой ошибки, поэтому я думаю, что оно скоро появится в стабильных сборках.   -  person Cristian Necula    schedule 04.04.2011
comment
Chrome 10.0.648.204, IE9 и FF4 в Windows 7 отображают для меня одно и то же, без «*» в первых LI.   -  person Mr. Shiny and New 安宇    schedule 04.04.2011
comment
Я использую Chrome 10.0.648.204 и не вижу проблемы. Может ошибка Win XP? Могу сказать, что с вашим CSS и HTML проблем нет, это Chrome.   -  person Jan Sverre    schedule 04.04.2011


Ответы (1)


Я достаточно уверен, что вас укусила та же проблема, что и в предыдущем вопросе, на который я ответил:

last-child: после отсутствия рендеринга в Chrome? Проблема с использованием псевдоэлемента?

Я выяснил очевидную правду в том, что это была ошибка, и нашел несколько отчетов об ошибках, подтверждающих это.

Кто-то еще нашел странный обходной путь; см. принятый ответ.

person thirtydot    schedule 04.04.2011
comment
Спасибо. Я не видел ссылок на них, но я не думаю, что действительно искал last-child. Упомянутый обходной путь не помог мне, но у меня нет побочных эффектов. - person mpdonadio; 05.04.2011