Estava eu fazendo um daqueles botões de rádio que, ao ser selecionado, faz com que outras opções apareçam através de uma div que estava escondida; usando o display:block.

Só que dessa vez, eu precisava usar esse artifício para mostrar uma linha de uma tabela. O que eu fiz? Simplesmente mudei de display:block para display:table-row; o meu código ficou da seguinte maneira:

if (document.getElementById(“deficiente_s”).checked==true) {
document.getElementById(“tr_deficiente”).style.display = “table-row”;
}
else {
document.getElementById(“tr_deficiente”).style.display = “none”;
}
}

Fui checar no Firefox e ficou perfeito mas eis que checo no IE7 e vejo que ele renderiza tudo errado (pra variar). Então após uma breve pesquisa no Google descubro a causa do problema.

O problema é que o Mozilla, como era de se esperar, requer o atributo display:table-row para que o elemento aja como uma linha de tabela; já o Internet Explorer não entende este atributo e vai renderizar elementos como uma linha de tabela apenas se for um <tr> e possuir display:block.

Então, para solucionar um problema como o meu você deve deixar em branco o valor do display; de maneira que o valor apresentado será o valor “default”.

function checaDeficiente() {
if (document.getElementById(“deficiente_s”).checked==true) {
document.getElementById(“tr_deficiente”).style.display = “”;
}
else {
document.getElementById(“tr_deficiente”).style.display = “none”;
}
}

Deixando o display:”", o código funciona de maneira correta tanto no Firefox quanto no IE7. (não me perguntem sobre o IE6 pois eu não quero nem ver)

Compartilhe!