IE8 inline-block não está funcionando

Digamos que eu tenha o seguinte código

 span, ul, ul li { display: inline-block; vertical-align: top; margin: 0; padding: 0; list-style: none; }  i would want 
  • this
  • on
  • one line.

Eu quero isso para exibir inline no IE8. Em todos os lugares que eu li tudo diz que isso deve funcionar, o IE8 suporta inline-block. No entanto, depois de uma manhã de tentativas eu não posso obter o acima para alinhar. Eu sei que poderia flutuar, mas com os outros elementos na minha página (não mostrados aqui) eu precisaria usar um ‘clearfix’ que é mais mark up. Eu só preciso direcionar o IE8 e gostaria de saber por que o bloco inline não funciona para mim quando aparentemente é suportado. O código acima faz o que eu quero quando visualizado no Google Chrome.

Eu estou supondo que você não tenha declarado um doctype. Tente colocar isso na primeira linha, antes da tag html:

 < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

O código que você colou funciona no IE8 com esse tipo de documento.

Nem todas as versões do IE8 parecem funcionar igualmente. Descobri que o código fornecido, mesmo com um DOCTYPE, não funciona no IE 8.0.6001.18702, que é uma versão anterior.

No entanto, a solução para versões inferiores do IE também funcionou nesse IE 8:

  

Você pode definir margem direita: 1px

funcionou muito bem para mim.

Na minha experiência, é sempre uma idéia melhor usar o modo universal (IE6 +) de declarar um bloco inline. Mesmo se você estiver almejando navegadores mais recentes toda vez que eu tentei dizer que ele é suportado apenas por navegadores mais novos, alguns clientes ainda mexem com o tipo de documento e, em seguida, as vendas dizem que ele precisa ser corrigido, porque os clientes ainda podem vê-lo não entendi, que é baixo para as configurações do IE e não a nossa culpa. Mais do que quando você está usando blocos embutidos para material estrutural, ele impede que o site se desintegre completamente se o usuário estiver visualizando o site em um IE mais antigo por qualquer motivo.

 display: inline-block; *zoom: 1; *display: inline; 

O IE8 irá tratá-lo como um elemento de nível de bloco, a menos que você use float.

 .divInlineBlock { display: inline-block; float: left; } 

Observe que o IE8 funcionará como o IE7 se você estiver visualizando um site de intranet, o que pode acontecer conforme você se desenvolve! Veja esta pergunta do StackOverflow:

IE8 Rendering como IE7 por padrão?

Para o IE8 – você pode adicionar uma declaração específica:

display: inline-table;

que funciona muito bem.