Como você contornar IE não suportar: depois?

Question

Eu tenho um monte de listas

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

decorados com

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

Este tem de ser um tipo de problema comum. Eu estou pensando que eu poderia ou atravancar a html e colocar em intermediário <li> da contendo o personagem, ou eu poderia ligar em um javascript para colocá-los lá se IE é o navegador de carregamento, mas que não iria pegar as pessoas sem javascript. Iuno. Estou inclinado para desordenar o html, mas eu gostaria de saber se há algumas opiniões sobre isso.

Answer 1

1. Use o IE7.js hack para adicionar suporte pós pseudoelement.
2. Use comentários condicionais para adicionar à marcação para simular esse efeito ou para remover parte do estilo existente para torná-lo mais fácil de ler, sem divisórias - por exemplo, deixar os itens da lista de empilhar em uma folha de estilo em um comentário condicional
3. Permitir IE6 para degradar graciosamente, reorganizando o estilo para que isso não aconteça, mesmo que pareça diferente em outros browsers.

Answer 2

Internet Explorer (IE) não suporta o: depois selector , devemos usar algum hack vez , por exemplo, esta:

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

"xkcd150." - este será adicionado depois de cada <li>

sua expressão, o que geralmente usado para substituir e consertar alguns bugs do IE.

Assim, o código completo é a seguinte:

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

As primeiras linhas acrescenta "/", eo segundo é usado para adicionar nada.

Todo o código deve ser adicionado em seu arquivo css.

Answer 3

Aqui está uma idéia que você não vai gostar. 8-) Coloque seus / símbolos em como imagens de fundo, no preenchimento correto dos <li>s.

Answer 4

Eu só faço isso na linguagem do lado do servidor ao gerar a lista de HTML. Suponho que seria considerado "desordenar o HTML".

Answer 5

Eu uso javascript e comentários condicionais. ou seja, usando jQuery.

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

É offcourse melhor usar um arquivo JS separado.
Isso também tem a desvantagem de que você tem que escrever tudo duas vezes desde que você colocá-lo em CSS para os bons navegadores e novamente em javascript para o IE6.

Answer 6

Tente usar algo como jQuery.

`$ (function () {

$ ( 'li') não ( ': last-child').. Append ( '\' ');

}); `

Não atravancam o html. Além disso, para fazer este trabalho apenas com o IE, tente usar a compatibilidade jquery.

Answer 7

Se o seu conteúdo não é intented a mudança em tempo de execução, você pode usar o seguinte:

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

Se o seu conteúdo se destina a mudança em tempo de execução, você poderia fazer algo parecido com isto:

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

Infelizmente, este é extremamente lento. Embora seja provável que o trabalho no IE6 com uma redução significativa do seu desempenho, IE7 é provável que falhar se você tem muitos ícones na sua página. Então, eu não recomendaria esta segunda técnica, a menos que você use somente muito poucos ícones e você pode pagar a redução do desempenho.

Answer 8

E se IE apoiaria última criança você não precisa fazer o class = "último":. P

apoio

IE tem sido e continuará a ser uma porcaria. IE 8 tem feito grandes melhorias,: after e: antes de trabalho como seria de esperar, IE 7 suporta-los também. Apenas alvo aqueles dois, especialmente desde que a Microsoft está empurrando o IE 8 para fora sobre o Windows Update.