¿Cómo trabajas con IE que no admite: después?

Question

Tengo un montón de listas

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

estilo con

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

Esto tiene que ser una especie de problema común. Estoy pensando que podría desordenar el html y poner intermedios <li> que contengan el carácter, o podría conectar un javascript para ponerlos allí si IE es el navegador de carga, pero eso no atraería a la gente sin javascript Iuno Me inclino por saturar el html, pero me gustaría saber si hay algunas opiniones al respecto.

Answer 1

1. Use el truco IE7.js para agregar después de la compatibilidad con pseudoelementos.
2. Use comentarios condicionales para agregar al marcado para simular ese efecto o eliminar parte del estilo existente para que sea más fácil de leer sin divisores; por ejemplo, deje que los elementos de la lista se apilen en una hoja de estilo en un comentario condicional
3. Permita que IE6 se degrade con gracia reorganizando el estilo para que esto no suceda, incluso si se ve diferente en otros navegadores.

Answer 2

Internet Explorer (IE) no es compatible con: después del selector , debemos usar algún truco , por ejemplo este:

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

" xkcd150 " - Este se agregará después de cada <li>.

es una expresión, que generalmente se usa para reemplazar y corregir algunos errores de IE.

Entonces, el código completo es:

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

Las primeras líneas agregan " / " ;, y el segundo se usa para no agregar nada.

Todo el código debe agregarse a su archivo CSS.

Answer 3

Aquí hay una idea que no te gustará. 8-) Coloque sus símbolos / como imágenes de fondo, en el relleno derecho de los <li> s.

Answer 4

Simplemente lo hago en el lenguaje del lado del servidor cuando genero la lista HTML. Supongo que eso se consideraría & Quot; saturando el HTML & Quot ;.

Answer 5

Uso javascript y comentarios condicionales. es decir, usando jQuery.

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

Es mejor usar un archivo JS separado.
Esto también tiene la desventaja de que tiene que escribir todo dos veces, ya que lo puso en CSS para buenos navegadores y nuevamente en JavaScript para IE6.

Answer 6

Intenta usar algo como jQuery.

`$ (function () {

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

}); `

No satura el html. Además, para que esto solo funcione con IE, intente usar la compatibilidad de jquery.

Answer 7

Si su contenido no tiene la intención de cambiar en tiempo de ejecución, puede usar lo siguiente:

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

Si su contenido está destinado a cambiar en tiempo de ejecución, puede hacer algo como esto:

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

Desafortunadamente, esto es extremadamente lento. Si bien es probable que funcione en IE6 con una reducción significativa de su rendimiento, es probable que IE7 se bloquee si tiene demasiados iconos en su página. Por lo tanto, no recomendaría esta segunda técnica a menos que use muy pocos iconos y pueda permitirse la reducción del rendimiento.

Answer 8

Y si IE admitiera last-child no necesitaría hacer la clase = " last " : P.

El soporte de IE ha sido y seguirá siendo una mierda. IE 8 ha realizado mejoras masivas: después y: antes del trabajo como era de esperar, IE 7 también las admite. Simplemente apunte a esos dos, especialmente porque Microsoft está empujando IE 8 a través de Windows Update.