: selettore CSS attivo non funziona per IE8 e IE9

Ecco il mio sito . Questo è l’ultimo problema di una serie di discrepanze tra i browser che ho riscontrato e risolto grazie alla community.

In sostanza, in Internet Explorer 8 e Internet Explorer 9 :active stili :active non vengono applicati al menu. Dovrebbe diventare più scuro quando viene premuto. Per favore fatemi sapere perché e come risolvere. Grazie in anticipo.

La pseudo-class: active si applica mentre un elemento viene triggersto dall’utente. Ad esempio, tra le volte in cui l’utente preme il pulsante del mouse e lo rilascia. Vedi la documentazione di W3.

Ma stai applicando il tuo :active selettore :active al tuo elemento

  • , che non può avere uno stato attivo dal momento che non viene mai triggersto realmente – solo al passaggio del mouse. È necessario applicare :active stato :active a <- True per IE 6.

    AGGIORNAMENTO: Ecco un esempio di prova su jsFiddle come puoi vedere funziona ok su element ma non ok su

  • Informazioni interessanti che ho trovato qui

    La pseudo-class: active si applica mentre un link viene selezionato dall’utente.

    Il CSS1 era un po ‘ambiguo su questo comportamento: “Un link’ attivo ‘è uno che è attualmente selezionato (ad es. Con una pressione di un pulsante del mouse) dal lettore.” Inoltre, in CSS1,: active si escludeva a vicenda da: link e: visited. (E non c’era: hover pseudo-class.)

    I CSS2 hanno cambiato le cose in modo che le regole per: active possano essere applicate contemporaneamente a: visited o: link. E il comportamento è stato spiegato un po ‘meglio: “La pseudo-class triggers si applica mentre un elemento viene triggersto dall’utente, ad esempio tra le volte in cui l’utente preme il pulsante del mouse e lo rilascia.”

    IMO, FF e altri sono conformi a CSS2 meglio di IE. Ma dal momento che un link dovrebbe caricare una nuova pagina, IE potrebbe legittimamente dire che il collegamento è ancora “attivo” mentre la nuova pagina si sta caricando, che è ciò che accade.

    È ansible visualizzare un comportamento contro-intuitivo simile in FF facendo clic sul collegamento, ma spostando il mouse fuori dal collegamento tenendo premuto il pulsante del mouse. Il collegamento non è triggersto (non è caricata una nuova pagina), ma il collegamento rimane in: stato attivo. D’altra parte, Chrome e Opera distriggersno il collegamento, ma in momentjs diversi; Chrome non appena il mouse lascia l’area di collegamento, Opera non finché il pulsante del mouse non viene rilasciato. In questo esempio, IE si comporta come FF. (Premi Invio dopo aver rimosso il mouse dal link e vedrai più differenze nel comportamento).

    Non chiamerei nessuna di queste differenze “bug”, a causa delle ambiguità nelle specifiche.

    L’unica soluzione che posso offrire è accettare il fatto che non è ansible controllare ogni aspetto del comportamento del browser. Gli utenti di browser diversi hanno aspettative di comportamento diverse e se si inizia a scherzare con le aspettative degli utenti, si è sulla strada sbagliata.

    Solo per motivi di pertinenza e per salvare a chiunque altro la seccatura di cercare una soluzione, ho trovato anche un “bug” in IE <= 10, in cui non è possibile applicare gli stili a: child attivo, ad esempio;

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

    Quanto sopra non cambierà la posizione dell’immagine in IE <= 10, nel qual caso dovresti applicare: attivo sull'elemento figlio stesso;

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

    Che nella maggior parte dei casi non è una soluzione perfetta in quanto qualsiasi testo all’interno dell’ancora deve avere un valore z-index più alto dell’immagine, il che significa che l’immagine cambierà solo la sua posizione basandosi sul clic sull’immagine stessa (dando all’immagine il: stato attivo) … che mi ha lasciato in una condizione minore, ma un po ‘meno (per una soluzione solo css).

    Quindi anche se questa non è una correzione, è più una nota di “avvertimento” per gli altri sulla rovina allo pseudo-selettore attivo in IE. Sciocchezze. = (