CSS атрибут селектор + потомок дает ошибку в Webkit? - PullRequest
Новая
       27

CSS атрибут селектор + потомок дает ошибку в Webkit?

10 голосов
/ 11 июля 2011

Рассмотрим этот CSS: 

[data-color="red"] h1 {
background-color:red;
}

[data-color="blue"] h1 {
background-color:blue;
}

И этот HTML: 

<div data-color="red">
<h1>red</h1>
</div>

<div data-color="blue">
<h1>blue</h1>
</div>

<div data-color="blue">
<h1>blue</h1>
</div>

Теперь взгляните на следующую демонстрацию приведенного выше кода в Webkit и любом другом браузере:
http://jsfiddle.net/aUCkn/

Что странно, если вы поместите каждый h1 в одну и ту же строку, то есть ::1011* 

<div data-color="red"><h1>red</h1>
</div>

<div data-color="blue"><h1>blue</h1>
</div>

<div data-color="blue"><h1>blue</h1>
</div>

Он также работает в Webkit:
http://jsfiddle.net/aUCkn/1/

Кто-нибудь знает, откуда это? Я что-то не так делаю или Webkit ведет себя глупо?

Ответы [ 4 ]

5 голосов
/ 11 июля 2011

Первый jsFiddle не работает в моем Chrome 12.0.742.112 (стабильный).

Однако, это работает в моем Chrome 14.0.803.0 dev-m.

Итак, они уже знают и исправили ошибку. Вам просто нужно дождаться исправления, чтобы приземлиться в стабильном канале.

Я попытаюсь найти ссылку на сообщение об ошибке, если оно существует.

3 голосов
/ 07 февраля 2012

Попробуйте добавить [_] {} к вашему CSS (не важно где).

В действительности это может быть любое правило селектора атрибута, без предложения-потомка, которое потенциально будет соответствовать атрибутным элементам, выбранным исходными селекторами, то есть: [data-color] {} и div[data-color] {} исправят остальные,a[data-color] {} не исправит это.

Я проверил это на опубликованной скрипке (http://jsfiddle.net/aUCkn/), и она работает для Safari (5.1.2).

Мой коллега и янашел его после игры с множеством случайных идей для обходных путей.

2 голосов
/ 11 июля 2011

При использовании Chrome (Webkit) я также получаю эту проблему, хотя, похоже, она отлично работает в Firefox и IE9. С Webkit определенно возникает проблема, что лишние пробелы вызывают проблемы.

1 голос
/ 09 июня 2012

--- ОБНОВЛЕНИЕ ---

Эта проблема исправлена ​​в Chrome начиная с версии 18, она по-прежнему остается проблемой в других браузерах на основе WebKit.

Что касается решения этой проблемы, ответ Майкла Мортона, приведенный выше, является лучшим здесь - он более гибкий и эффективный, чем мой. Я проголосовал за ответ Майкла и предлагаю вам его использовать.

Вот CSS-хак, который исправляет проблему: http://jsfiddle.net/aUCkn/101/

Вам просто нужно поставить * + перед селектором. Теперь, прежде чем вы все схватите свои вилы и факелы за использование звездного селектора, помните, что это все влево, поэтому оно не должно влиять на производительность каким-либо значимым образом;)

PS - Я также могу подтвердить, что эта ошибка затрагивает ВСЕ версии ВСЕХ браузеров WebKit на ВСЕХ платформах и устройствах - кроме Chrome 14+. Какая ужасная ошибка, теперь большинству браузеров WebKit нужно отозвать утверждение, что они поддерживают даже древнюю спецификацию CSS2.1. Ух ты, LOL.

...