Comment travaillez-vous autour d'IE ne supportant pas: après?

Question

j'ai un tas de listes

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

stylé avec

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

Cela doit être une sorte de problème banal. Je pense que je pourrais soit encombrer le html et mettre entre <li> contenant le caractère, ou je pourrais accrocher un javascript pour les mettre là si IE est le navigateur de chargement, mais cela ne prendrait pas les gens sans javascript. Iuno. Je suis plutôt enclin à encombrer le code HTML, mais j'aimerais savoir s'il y a des opinions à ce sujet.

Answer 1

1. Utilisez le piratage IE7.js à ajouter après la prise en charge du pseudo-élément.
2. Utilisez des commentaires conditionnels à ajouter au balisage pour simuler cet effet ou pour supprimer une partie du style existant afin de faciliter la lecture sans séparateurs - par exemple, laissez les éléments de la liste s'empiler dans une feuille de style dans un commentaire conditionnel
3. Permettez à IE6 de se dégrader avec élégance en réorganisant le style afin que cela ne se produise pas, même s'il est différent dans les autres navigateurs.

Answer 2

Internet Explorer (IE) ne prend pas en charge le sélecteur: après le sélecteur , nous devons utiliser un hack à la place , par exemple celui-ci:

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

" xkcd150 " - Celui-ci sera ajouté après chaque <li>.

c’est une expression qui, habituellement, remplaçait et corrigeait certains bogues d’IE.

Le code complet est donc:

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

La première ligne ajoute " / " ;, et le second sert à n’ajouter rien.

Tout le code doit être ajouté à votre fichier CSS.

Answer 3

Voici une idée qui ne vous plaira pas. 8-) Mettez vos symboles / dans des images d’arrière-plan, dans le remplissage à droite du <li> s.

Answer 4

Je le fais juste dans le langage côté serveur lors de la génération de la liste HTML. Je suppose que cela serait considéré comme & "; Encombrer le HTML &";

Answer 5

J'utilise javascript et des commentaires conditionnels. c'est-à-dire en utilisant jQuery.

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

Il est évidemment préférable d’utiliser un fichier JS séparé.
Cela a aussi l’inconvénient de devoir tout écrire deux fois, car vous le mettez en CSS pour les bons navigateurs et encore en javascript pour IE6.

Answer 6

Essayez d’utiliser quelque chose comme jQuery.

`$ (function () {

$ ('li'). not (': last-child'). append ('\' ');

}); `

Cela n'encombre pas le code HTML. En outre, pour que cela fonctionne uniquement avec IE, essayez d’utiliser la compatibilité jquery.

Answer 7

Si votre contenu n'est pas destiné à être modifié au moment de l'exécution, vous pouvez utiliser les éléments suivants:

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

Si votre contenu est destiné à être modifié à l'exécution, vous pouvez procéder comme suit:

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

Malheureusement, c'est extrêmement lent. Bien qu'il soit susceptible de fonctionner dans IE6 avec une réduction significative de vos performances, IE7 risque de tomber en panne si vous avez trop d'icônes sur votre page. Donc, je ne recommanderais pas cette seconde technique à moins que vous n'utilisiez que très peu d'icônes et que vous puissiez vous permettre une réduction des performances.

Answer 8

Et si IE prend en charge last-child, vous n’auriez pas besoin de faire class = " last " : P.

Le support IE a été et restera une merde. IE 8 a apporté des améliorations considérables: après et: avant le travail attendu, IE 7 les prend également en charge. Il suffit de cibler ces deux-là, d’autant plus que Microsoft fait passer IE 8 à Windows Update.