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

Question

В Safari 5.1.3 я только что заметил, что при написании селектора смежных родственных элементов CSS (например, +) и при обращении к элементу <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 ..

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

Answer 1

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

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

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

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

jsFiddle Предварительный просмотр

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