Come si aggira IE non supportando: dopo?

Question

Ho un sacco di elenchi

<ul>
  <li class="first">Item 1</li>
  <li>Item 2</li>
  <li class="last">Item 3</li>
</ul>

disegnato con

li:after {
  content: ' / ';
}
li.last:after {
  content: '';
}

Questo deve essere una sorta di problema comune. Sto pensando che potrei ingombrare l'html e mettere in <li> il contenuto del personaggio, oppure potrei agganciare un javascript per inserirli se IE è il browser di caricamento, ma ciò non catturerebbe le persone senza javascript. Iuno. Mi sto inclinando a ingombrare l'html ma mi piacerebbe sapere se ci sono delle opinioni su questo.

Answer 1

1. Utilizza l'hack IE7.js per aggiungere dopo il supporto pseudoelement.
2. Usa i commenti condizionali da aggiungere al markup per simulare quell'effetto o per rimuovere parte dello stile esistente per rendere più semplice la lettura senza divisori - ad esempio, lascia che gli elementi dell'elenco si impilino in un foglio di stile in un commento condizionale
3. Consenti a IE6 di degradare con grazia riorganizzando lo stile in modo che ciò non accada, anche se sembra diverso in altri browser.

Answer 2

Internet Explorer (IE) non supporta il: dopo il selettore , invece dobbiamo usare un po 'di hacking , ad esempio questo:

li { scrollbar-face-color: expression(!this.isInserted==true ? this.isInserted=(this.innerHTML = '' + this.innerHTML + 'xkcd150') : ''); }

quot &; & Xkcd150 quot; - questo verrà aggiunto dopo ogni <li>.

è un'espressione, che di solito veniva utilizzata per sostituire e correggere alcuni bug di IE.

Quindi, il codice completo è:

li { scrollbar-face-color: expression(!this.isInserted==true ? this.isInserted=(this.innerHTML = '' + this.innerHTML + ' / ') : ''); }

li.last {
scrollbar-face-color: expression(!this.isInserted==true ? this.isInserted=(this.innerHTML = '' + this.innerHTML + '') : ''); }

Le prime righe aggiungono " / " ;, e il secondo non viene utilizzato per aggiungere nulla.

Tutto il codice deve essere aggiunto al tuo file css.

Answer 3

Ecco un'idea che non ti piacerà. Cool Inserisci i tuoi simboli / come immagini di sfondo, nell'imbottitura a destra delle <li> s.

Answer 4

Lo faccio solo nella lingua lato server durante la generazione dell'elenco HTML. Suppongo che sarebbe considerato & Quot; ingombro dell'HTML & Quot ;.

Answer 5

Uso javascript e commenti condizionali. cioè usando jQuery.

 <!--[if IE 6]>
   <script type='text/javascript'>
     $(document).ready( function() {
      $('li').not('li.last').after('/');
     });
   </script>
 <![endif]-->

È preferibile utilizzare un file JS separato Questo ha anche lo svantaggio di dover scrivere tutto due volte da quando lo metti in CSS per buoni browser e di nuovo in javascript per IE6.

Answer 6

Prova a usare qualcosa come jQuery.

`$ (function () {

$ ( 'Li') non ( ': last-child').. Aggiungere ( '\' ');

}); `

Non ingombra l'html. Inoltre, per farlo funzionare solo con IE, prova a utilizzare la compatibilità jquery.

Answer 7

Se il contenuto non è intenzionato a cambiare in fase di esecuzione, è possibile utilizzare quanto segue:

.icon-glass {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}

Se i tuoi contenuti sono destinati a cambiare in fase di esecuzione, potresti fare qualcosa del genere:

.icon-glass {
  *top:expression(0, this.innerHTML = '');
}

Sfortunatamente, questo è estremamente lento. Mentre è probabile che funzioni in IE6 con una significativa riduzione delle prestazioni, è probabile che IE7 si blocchi in caso di troppe icone sulla tua pagina. Quindi non consiglierei questa seconda tecnica a meno che tu non usi solo pochissime icone e non ti puoi permettere la riduzione delle prestazioni.

Answer 8

E se IE supportasse last-child non avresti bisogno di fare la classe = " last " :.

Il supporto IE è stato e continuerà ad essere una schifezza. Internet Explorer 8 ha apportato notevoli miglioramenti: dopo e: prima del lavoro, come previsto, anche Internet Explorer 7 li supporta. Scegli come target quei due, soprattutto perché Microsoft sta spingendo IE 8 su Windows Update.