Selectores de hermanos adyacentes CSS, Safari y <nav> elementos

Question

En Safari 5.1.3 acabo de notar que, al escribir un selector de hermanos adyacente CSS (er el +) y al hacer referencia a un elemento <nav> - el navegador no respeta el CSS .

Así:

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

y

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

He probado estos con otros elementos de HTML 5 (sección, artículo, a un lado) y parece que funciona bien. Hasta que pongas un elemento de navegación en la mezcla; entonces se rompe. Aquí hay un jsfiddle.

Esto está resultando frustrante ya que mi empaquetador de activos de rieles está minificando el CSS y eliminando espacios innecesarios. Esto no es un problema para IE7, Firefox, Chrome u Opera, pero Safari 5 ...

¿Alguien más tuvo similares? ¿Saber porque? ¿Sabes una forma de solucionarlo?

Answer 1

Este es sin duda un error Safari y debe informarlo utilizando Safari> Comunicar errores a manzana ... en un Mac o Ayuda> Comunicar errores a manzana ... en un PC (o el botón de la barra de herramientas si se muestra en la barra de herramientas de Safari).

La manera más fácil de resolver esto es desactivar la minificación CSS si Asset Packager tiene una opción para ello.

Si no tiene esa opción, no existe una solución rápida y sucia: si sólo tiene uno nav elemento directamente después de su h1, se puede utilizar el general sibling selector ~ en cambio, como no parece Safari tener ningún problema con ella:

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

jsFiddle preview

Si tiene varios elementos siguientes nav su h1, que tendrá que reemplazar los estilos de forma manual para las sucesivas nav elementos usando h1 ~ nav ~ nav.