Нечетное поведение с CSS: first-child: before в Chrome - PullRequest
Новая
       21

Нечетное поведение с CSS: first-child: before в Chrome

5 голосов
/ 04 апреля 2011

Я вижу что-то довольно странное в 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 использует строгий DOCTYPE XHTML 1.0, но я также вижу это с HTML5 DOCTYPE.

Спасибо.

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

1 Ответ

9 голосов
/ 04 апреля 2011

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

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

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

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

...