Come risolvere il problema: IE6 non supporta l'attributo CSS & # 8220; & # 8221; selettori

StackOverflow https://stackoverflow.com/questions/649341

Domanda

Uno dei progetti su cui sto lavorando utilizza CSS " attributo " selettore [att]

Selettori CSS

che non è supportato da ie6: Supporto per i selettori CSS in IE6 ( cerca testo " Selettori di attributi ")

Esistono soluzioni alternative / hack che sono ovviamente html / css validi per superare questo problema?

È stato utile?

Soluzione

Poiché IE6 è essenzialmente limitato a:

  • selettori di classe
  • Selettori ID
  • (spazio) selettori discendenti
  • a: -solo pseudo-selettori

le tue uniche opzioni sono:

  • Utilizza più classi per identificare i tuoi elementi
  • Usa JavaScript ( fortemente non raccomandato tranne in casi altamente specializzati)

Trovo molto utile sfruttare la possibilità di assegnare più classi a un elemento separandole con uno spazio: class = " foo bar "

Altri suggerimenti

Questo non è possibile senza peppare il tuo HTML con una pila di selettori di classe estranei, purtroppo.

Consiglierei di progettare il tuo sito in modo che il tuo CSS completamente valido funzioni per le persone che utilizzano browser moderni e che sia ancora utilizzabile in IE6, anche se visivamente non del tutto giusto. Devi solo trovare il giusto equilibrio tra rendere il tuo sito standard e piegarti all'indietro per gli utenti che non effettueranno l'aggiornamento. È un browser rotto, trattalo come tale.

Se vuoi il selettore di attributi in IE6, puoi usare Dean Edward IE.js. http://dean.edwards.name/IE7/

Ciò renderà IE 5+ molto più simile a IE7 

supports the following CSS selectors: 
parent > child
adjacent + sibling
adjacent ~ sibling
[attr], [attr="value"], [attr~="value"] etc
.multiple.classes (fixes bug)
:hover, :active, :focus (for all elements)
:first-child, :last-child, only-child, nth-child, nth-last-child
:checked, :disabled, :enabled
:empty, :contains(), :not()
:before/:after/content:
:lang()

Non avevo IE6 (uso IE7) quindi non posso dire che funzionasse, ma provalo

Puoi utilizzare le espressioni CSS di Internet Explorer combinate con il carattere di sottolineatura sicuro (" _ " ;, IE6 e precedenti) hack CSS: 

/* Adds dotted bottom border to `<ABBR>` with a `title` attribute. */
abbr {
        _border-bottom: expression(this.title ? '1px dotted' : 'none');
}

abbr[title] {
        border-bottom: 1px dotted;
}

Capisco, che hai chiesto " valido " CSS, ma se l'hack CSS sopra ti fa impazzire, leggi Hack CSS sicuri .

Quanto sopra potrebbe essere modificato in: 

.ie6 abbr {
        _border-bottom: expression(this.title ? '1px dotted' : 'none');
}

abbr[title] {
        border-bottom: 1px dotted;
}

Questo è se il tuo HTML è iniziato come: 

<!--[if lt IE 7]><html class="ie6"><![endif]-->
<!--[if IE 7]>   <html class="ie7"><![endif]-->
<!--[if IE 8]>   <html class="ie8"><![endif]-->
<!--[if gt IE 8]><!--><html><!--<![endif]-->

Usa le classi, questa è l'unica soluzione, purtroppo.

Se stai usando jQuery sul tuo sito, un'altra opzione è SuperSelector - passa attraverso i fogli di stile del tuo sito, aggiungendo dinamicamente le classi agli elementi in modo che anche IE6 possa crogiolarsi nel bagliore del corretto supporto dei selettori CSS come ul li: first- child li: nth-child (dispari) a: hover .

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top