6

Aquí está mi site. Este es el último problema de una serie de discrepancias entre navegadores que he experimentado y resuelto gracias a la comunidad.: el selector css activo no funciona para IE8 e IE9

Básicamente, en Internet Explorer 8 e Internet Explorer 9, los estilos :active no se aplican al menú. Debería oscurecerse cuando se presiona. Por favor, hágame saber por qué y cómo solucionarlo. Gracias por adelantado.

+0

Uh, ¿a qué estilo ': active' se refiere? Trabajan en ambas versiones para mí – BoltClock

+0

@BoltClock: El menú tiene un estilo activo. Debe ser más oscuro cuando se presiona, lo que le da una distinción en comparación efecto. – UrBestFriend

+0

Lo veo ahora. Me lo he perdido. – BoltClock

Respuesta

5

The: activo pseudo-clase se aplica mientras un elemento está siendo activado por el usuario . Por ejemplo, entre los tiempos el usuario presiona el botón del mouse y lo libera . Ver W3 documentation.

Pero usted está solicitando su selector de :active a su elemento <li>, que no puede tener un estado activo, ya que en realidad nunca se activa - solamente mantenido. Debe aplicar :active estado para <a> < - Verdadero para IE 6.

ACTUALIZACIÓN: He aquí una muestra de ensayo a jsFiddle como se puede ver que funciona bien en <a> elemento pero no aceptable en <li>

información interesante he encontrado here

The: activo pseudo-clase se aplica mientras un enlace está siendo seleccionada por el usuario.

CSS1 era un poco ambiguo en este comportamiento : "Un enlace 'activo' es uno que se está seleccionado actualmente (por ejemplo por una prensa de botón del ratón) por el lector ." Además, en CSS1,: activo fue mutuamente exclusivo de: enlace y : visitado. (Y no había: flotar pseudo-clase.)

CSS2 cambió las cosas para que las reglas para : activos pueden aplicarse al mismo tiempo que : visitado o: enlace. Y el comportamiento se explica un poco mejor: "La :.. Activa pseudo-clase se aplica mientras un elemento está siendo activado por el usuario Por ejemplo, entre los tiempos el usuario pulsa el botón del ratón y lo libera"

IMO, FF y otros cumplen con CSS2 mejor que IE. Pero dado que se supone que un enlace carga una nueva página, IE podría decir legítimamente decir que el enlace sigue siendo "activo" mientras que la nueva página está cargando , que es lo que sucede.

se puede ver un comportamiento contrario a la intuición similar en FF por clic en el enlace, pero moviendo el ratón fuera del enlace mientras mantiene el botón del ratón. El enlace no está activado (no se carga una página nueva), , pero el enlace permanece en el estado: activo.Por otro lado, Chrome y Opera desactivan el enlace, pero al veces diferentes; Chrome tan pronto como el mouse abandone el área de enlace, Opera no hasta que se suelte el botón del mouse. IE se comporta de la misma manera que FF en este ejemplo . (Hit entrar después de arrastrar el puntero del ratón fuera el enlace, y se le ver más diferencias en el comportamiento.)

Yo no llamaría a cualquiera de estas diferencias "bugs", a causa de ambigüedades en la especificación.

La única solución alternativa que puedo ofrecer es aceptar que no puede controlar cada aspecto del comportamiento del navegador. Los usuarios de diferentes navegadores tienen diferentes expectativas de comportamiento , y si comienzan a jugar con la expectativa del usuario, , está en el camino equivocado.

+1

Bastante seguro que la especificación no dice que 'li' no puede tener un estado activo. – BoltClock

+0

Como entiendo si no hay interacción activa con el elemento, no desencadenará el: estado activo - Voy a hacer un caso de prueba para esto. – easwee

+1

Parece que los íconos están bloqueando el menú del que se puede hacer clic. ¿Hay alguna solución para esto? – UrBestFriend

5

Sólo por el bien de relevancia y para salvar a nadie más la molestia de buscar una solución, también encontré un "error" en el IE < = 10, donde no se puede aplicar estilos a un: niño activo, por ejemplo, ;

a:active img { 
    position:absolute; 
    top:-30px; 
} 

Lo anterior no va a cambiar la posición de la imagen en el IE < = 10, en cuyo caso se tendría que solicitar: activa en el elemento propio niño;

a:active img, 
a img:active { 
    position:absolute; 
    top:-30px; 
} 

que en la mayoría de los casos no es una solución perfecta como cualquier texto dentro del ancla debe tener un valor de índice z mayor que el de la imagen, lo que significa que la imagen sólo va a cambiar su posición sobre la base de hacer clic en la imagen sí mismo (dando a la imagen el: estado activo) ... que me dejó en un enlace menor, pero un enlace sin excepción (para una solución de solo CSS).

Así que, aunque esto no es una solución, es más una nota de "advertencia" para otros acerca de la caída al pseudo selector activo en IE. Basura. = (

+2

'span: active + span' selector tampoco funciona en IE10. Tenga en cuenta que el simple 'span: active' funciona. – ruvim

+0

Gracias, @ruvim. Respuesta actualizada para reflejar su confirmación de error en IE10. – seemly

Cuestiones relacionadas