IE7 e a propriedade table-cell CSS
-
05-07-2019 - |
Pergunta
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.
Solução
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.
Outras dicas
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>
Eu tive o mesmo problema e usado
*float: left;
"*" indica IE única
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?
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.
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.
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?
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.
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
IE7 não suporta display:inline-block;
quer. Um corte aparente é zoom: 1; *display: inline;
após o seu css para display:table-cell;