Frage

Ich habe eine Reihe von Listen bekommt

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

gestylt mit

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

Dies hat eine Art alltäglich Problem. Ich denke, ich könnte entweder die HTML-Unordnung und setzen in Intermediär <li> die den Charakter enthält, oder ich könnte auf einem javascript Haken um sie dort zu setzen, wenn IE der Lade Browser ist, aber das wäre nicht die Menschen fangen ohne Javascript. Iuno. Ich bin Neigung in Richtung der html unübersichtlich, aber ich würde gerne hören, wenn es einige Meinungen zu diesem Thema sind.

War es hilfreich?

Lösung

  1. Verwenden Sie die IE7.js Hack nach Pseudoelement-Unterstützung hinzufügen.
  2. Verwenden Sie bedingte Kommentare zum Markup hinzufügen, um diesen Effekt zu simulieren oder einen Teil des vorhandenen Stils zu entfernen, um es ohne Trennwände lesen zu erleichtern - zum Beispiel, lassen Sie die Listenelemente in einem Stylesheet in einem bedingten Kommentar stapeln
  3. Lassen Sie IE6 anmutig degradieren durch den Stil neu anordnen, so geschieht dies nicht, auch wenn es in anderen Browsern anders aussieht.

Andere Tipps

Internet Explorer (IE) nicht unterstützt das: nach dem Selektor , müssen wir etwas Hack verwenden, anstatt , zum Beispiel dieses:

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

"xkcd150." - dieser wird nach jedem <li> hinzugefügt werden

Es ist ein Ausdruck, der in der Regel zu ersetzen und einige IE Fehler zu beheben.

Also, die vollständige Code ist:

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 + '') : ''); }

Die ersten Zeilen fügen hinzu „/“, und der zweite wird verwendet, nichts hinzuzufügen.

der Code Alle in Ihre CSS-Datei hinzugefügt werden müssen.

Hier ist eine Idee, die Sie nicht mögen. Setzen 8-) Ihre / Symbole in als Hintergrundbilder, in der richtigen Polsterung des <li>s.

Ich mache es nur in der Server-Side-Sprache, wenn die Liste HTML zu erzeugen. Ich nehme an, würde als „die HTML unübersichtlich“.

Ich benutze JavaScript und bedingte Kommentare. das heißt mit jQuery.

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

Es ist offcourse besser eine separate JS-Datei zu verwenden.
Dies hat auch den Nachteil, dass man alles zweimal zu schreiben, da Sie es in CSS setzen für eine guten Browser und wieder in Javascript für IE6.

Versuchen Sie so etwas wie jQuery verwenden.

`$ (function () {

$ ( 'li') nicht ( ': last-child').. Anhängen ( '\' ');

}); `

Es ist nicht die HTML verunstaltet. Auch um diese nur Arbeit mit IE, versucht jquery Kompatibilität mit.

Wenn Ihr Inhalt wird zur Laufzeit nicht intented zu ändern, können Sie die folgende verwenden:

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

Wenn Ihr Inhalt soll zur Laufzeit ändern, können Sie etwas tun könnte:

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

Leider ist dies extrem langsam. Während es wahrscheinlich ist, mit einer signifikanten Reduktion Ihrer Leistung in IE6 arbeiten, ist IE7 wahrscheinlich zum Absturz zu bringen, wenn Sie zu viele Symbole auf Ihrer Seite haben. Also ich würde nicht diese zweite Technik empfehlen, wenn Sie nur sehr wenige Symbole verwenden und Sie können die Leistungsreduzierung leisten.

Und wenn IE Last-Kind unterstützen würden Sie nicht den class = "liest" tun müssen:. P

IE-Unterstützung wurde und wird auch weiterhin Mist sein. IE 8 hat massive Verbesserungen vorgenommen,: nach und: vor der Arbeit, wie man erwarten würde, IE 7 sie auch unterstützt. Gerade diese beiden Ziel, zumal Microsoft IE 8 über Windows Update drängt.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top