IE7 e a propriedade table-cell CSS

Question

Então, eu adoro quando meu aplicativo está funcionando muito bem no Firefox, mas então eu abri-lo no IE e ... Não, por favor, tente novamente.

O problema que estou tendo é que eu estou definindo a propriedade de exibição CSS, quer none ou table-cell com JavaScript.

Eu estava inicialmente usando display: block, mas o Firefox foi tornando-o estranho sem a propriedade table-cell.

Eu adoraria fazer isso sem adicionar um hack no JavaScript para testar para o IE. Alguma sugestão?

Graças.

Answer 1

Uma boa maneira de resolver este definindo o valor display para '':

<script type="text/javascript">
<!--
function toggle( elemntId ) {
    if (document.getElementById( elemntId ).style.display != 'none') {
        document.getElementById( elemntId ).style.display = 'none';
    } else {
        document.getElementById( elemntId ).style.display = '';
    }
    return true;
}
//-->
</script>

O valor vazio faz com que o estilo de voltar a ele do valor padrão. Esta solução funciona em todos os principais navegadores.

Answer 2

Eu resolvi isso usando jQuery:

$(document).ready(function(){
  if ($.browser.msie && $.browser.version == 7)
  {
    $(".tablecell").wrap("<td />");
    $(".tablerow").wrap("<tr />");
    $(".table").wrapInner("<table />");
  }
});

o script acima assume que você tem divs usando estilo, tais como:

<style>
.table     { display: table; }
.tablerow  { display: table-row; }
.tablecell { display: table-cell; }
</style>

Answer 3

Eu tive o mesmo problema e usado

*float: left; 

"*" indica IE única

Answer 4

Bem, IE7 não tem display: table(-cell/-row) , assim você terá a figura algo mais fora ou fazer navegador alvo (que eu concordo, é mau corte). Como uma solução rápida (eu não sei o que você está tentando alcançar, a aparência-wise) você poderia tentar display: inline-block e ver o que parece.

Talvez descobrir uma maneira de fazer display: block e resolver o problema da "Firefox tornando-o estranho" em vez disso? Você pode descrever o que você quer dizer com a prestação estranho exatamente?

Answer 5

Você nunca precisa de Javascript para testar para o IE, uso condicional comentários .

Você pode olhar para a solução esses caras veio com para lidar com mesa-como exibição no IE.

Answer 6

Usando inline-block funciona bem para este tipo de coisa. Não, IE 6 e IE 7 tecnicamente não tem display: inline-block, mas você pode replicar o comportamento com os seguintes estilos:

div.show-ib {
    display: inline-block;
    *zoom: 1;
    *display: inline;
}

A chave para isso é 'zoom: 1' alterna a propriedade 'hasLayout' no elemento que muda a forma como o navegador processa um elemento nível de bloco. A única pegadinha com bloco em linha é que você não pode ter uma margem de menos de 4px.

Answer 7

Estou usando o CSS para mais de uma década e eu nunca teve ocasião de exibição uso:-célula da tabela, e as únicas vezes que eu sempre usar comentários condicionais são para esconder efeitos avançados de IE6.

Eu suspeito que uma abordagem diferente iria resolver o seu problema de uma forma intrinsecamente cross-browser. você pode abrir uma questão separada que descreve o efeito que você está tentando alcançar, e postar o HTML e CSS que está actualmente a trabalhar no Firefox?

Answer 8

Um exemplo de código fot os comentários condicionais que o usuário eyelidlessness, for publicado

"[if lt IE 8]" só funciona se o navegador é IE inferior IE8 porque IE8 faz isso direito. Com os comentários condicionais IE7 organiza os DIVs bem na horizontal ... HTML:

 <div class="container">
    <!--[if lt IE 8 ]><table><tr><![endif]--> 
    <!--[if lt IE 8 ]><td><![endif]-->
    <div class="link"><a href="en.html">English</a></div>
    <!--[if lt IE 8 ]></td><![endif]-->
    <!--[if lt IE 8 ]><td><![endif]-->
    <div tabindex="0" class="thumb"><img src="pictures\pic.jpg" /></div>
    <!--[if lt IE 8 ]></td><![endif]-->
    <!--[if lt IE 8 ]><td><![endif]-->
    <div class="link"><a href="de.html">Deutsch</a></div>
    <!--[if lt IE 8 ]></td><![endif]-->
    <!--[if lt IE 8 ]></tr></table><![endif]-->
</div> 

O meu CSS

.link {
 display:table-cell;
 vertical-align:middle;
 }
 div.container {
 margin: 0 auto;
 display:table;
 }
 .thumb {
 display:table-cell;
 float: left;
 text-align: center;
 }

IE 8 e 9 Trabalho com o CSS como o Firefox. IE7 parece agora o mesmo usando a tabela e TD & TR tags. Em algumas páginas IE 8 funcionou apenas 20% do tempo, então eu usei [if lt IE 9]

Isso também ajuda a suavizar questões vertical-align que o IE7 não pode manipular.

Answer 9

Eu tentei de tudo ea única maneira eu achei que era tudo cross browser foi utilizar Javascript / jQuery. Esta é uma solução limpa leve: clique aqui

Answer 10

IE7 não suporta display:inline-block; quer. Um corte aparente é zoom: 1; *display: inline; após o seu css para display:table-cell;