CSS смежных селекторов, элементов Safari и <nav>

В Safari 5.1.3 Я только заметил, что при написании смежного селектора CSS (er + one) и при обращении к элементу <nav> браузер не соблюдает CSS.

Итак:

h1 + p { ... } /* works fine */
h1+p { ... } /* works fine */

h1 + nav { ... } /* works fine */
h1+nav { ... } /* but, does NOT work */

Я тестировал их с другими элементами html 5 (раздел, статья, в стороне), и они, похоже, работают нормально. Пока вы не добавите элемент навигации в микс; то он ломается. Вот jsfiddle.

Это доказывает разочарование, так как мой рельс-пакер-агент минимизирует css и вынимает ненужные пробелы. Это не проблема для IE7, Firefox, Chrome или Opera, но Safari 5..

У кого-нибудь было подобное? Знаю, почему? Знать способ исправить?

Ответ 1

Это определенно ошибка Safari, и вы должны сообщить об этом, используя Safari > Сообщить об ошибках в Apple... на Mac или Справкa > Сообщить об ошибках в Apple... на ПК (или на панели инструментов, если она отображается на панели инструментов Safari).

Самый простой выход из этого - отключить минимизацию CSS, если у Asset Packager есть опция для него.

Если у него нет такой опции, существует быстрое и грязное обходное решение: если у вас есть только один элемент nav, который непосредственно следует за вашим h1, вы можете использовать общий селектор sibling ~, так как у Safari нет никаких проблем с ним:

h1 ~ nav { ... } /* works fine */
h1~nav { ... } /* works fine */

jsFiddle preview

Если у вас есть несколько элементов nav, следующих за вашим h1, вам придется переопределить стили вручную для следующих элементов nav с помощью h1 ~ nav ~ nav.