: selector CSS activo no funciona para IE8 e IE9

Aquí está mi sitio . Este es el último problema de una serie de discrepancias entre navegadores que he experimentado y resuelto gracias a la comunidad.

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.

La pseudoclase activa se aplica cuando el usuario está activando un elemento. Por ejemplo, entre las veces que el usuario presiona el botón del mouse y lo libera. Ver la documentación de W3.

Pero está aplicando su :active selector :active a su elemento

  • , que no puede tener un estado activo, ya que nunca se activa realmente, solo está suspendido. Debe aplicar :active estado :active a <- Verdadero para IE 6.

    ACTUALIZACIÓN: Aquí hay una muestra de prueba en jsFiddle, ya que puedes ver que funciona bien en el elemento pero no está bien en

  • Interesante información que encontré aquí

    La pseudoclase activa se aplica mientras el usuario selecciona un enlace.

    CSS1 fue un poco ambiguo sobre este comportamiento: “Un enlace ‘activo’ es uno que está siendo seleccionado actualmente (por ejemplo, presionando un botón del mouse) por el lector”. Además, en CSS1,: active era mutuamente exclusivo de: link y: visited. (Y no hubo: suspender pseudo-clase.)

    CSS2 cambió las cosas para que las reglas para: activo se puedan aplicar al mismo tiempo que: visitado o: enlace. Y el comportamiento se explicó un poco mejor: “La pseudoclase activa se aplica mientras el usuario activa un elemento. Por ejemplo, entre las veces que el usuario presiona el botón del mouse y lo libera”.

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

    Puede ver un comportamiento contraintuitivo similar en FF haciendo clic en el enlace, pero moviendo el mouse fuera del enlace mientras mantiene presionado el botón del mouse. El enlace no está activado (no se carga una página nueva), pero el enlace permanece en estado activo. Por otro lado, Chrome y Opera desactivan el enlace, pero en momentos diferentes; Chrome tan pronto como el mouse abandone el área de enlace, Opera hasta que se suelte el botón del mouse. IE se comporta de la misma manera que FF en este ejemplo. (Presiona enter luego de arrastrar el mouse fuera del enlace, y verás más diferencias en el comportamiento).

    No llamaría a ninguno de estos “errores” de diferencias, debido a las ambigüedades en la especificación.

    La única solución alternativa que puedo ofrecer es aceptar que no puede controlar todos los aspectos del comportamiento del navegador. Los usuarios de diferentes navegadores tienen diferentes expectativas de comportamiento, y si comienzas a jugar con las expectativas del usuario, estás en el camino equivocado.

    Solo por el bien de la relevancia y para salvar a los demás la molestia de buscar una solución, también encontré un “error” en IE <= 10, donde no se pueden aplicar estilos a un: niño activo, por ejemplo;

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

    Lo anterior no cambiará la posición de la imagen en IE <= 10, en cuyo caso necesitaría aplicar: activa en el elemento hijo mismo;

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

    Que en la mayoría de los casos no es una solución perfecta ya que cualquier texto dentro del ancla necesita tener un valor de z-index mayor que la imagen, lo que significa que la imagen solo cambiará su posición en función de hacer clic en la imagen (dando a la imagen: estado activo) … que me dejó en un enlace menor, pero un enlace sin excepción (para una solución de solo CSS).

    Entonces, aunque esto no es una solución, es más una nota de “advertencia” para otros sobre la caída al pseudo selector activo en IE. Basura. = (