style.display não funciona no Firefox, Opera, Safari - IE7 OK

StackOverflow https://stackoverflow.com/questions/10366

  •  08-06-2019
  •  | 
  •  

Pergunta

Eu tenho uma posição absolutamente div que quero mostrar quando o usuário clica em um link.O onclick do link chama uma função js que define a exibição do div para bloquear (também tentei:"", inline, table-cell, inline-table, etc).Isso funciona muito bem no IE7, e não em todos os outros navegadores que experimentei (FF2, FF3, Opera 9.5, Safari).

Tentei adicionar alertas antes e depois da chamada e eles mostram que a exibição mudou de none para block mas o div não é exibido.

Eu posso conseguir o div para exibir no FF3 se eu alterar o valor de exibição usando o inspetor HTML do Firebug (mas não executando javascript através do console do Firebug) - então eu sei que não está apenas aparecendo fora da tela, etc.

Eu tentei tudo que consigo pensar, incluindo:

  • Usando um tipo de documento diferente (XHTML 1, HTML 4, etc)
  • Usando visibilidade visível/oculta em vez de exibir bloco/nenhum
  • Usando javascript embutido em vez de uma chamada de função
  • Testes em diferentes máquinas

Alguma idéia sobre o que poderia causar isso?

Foi útil?

Solução 2

Como a configuração das propriedades com javascript nunca pareceu funcionar, mas a configuração usando a inspeção do Firebug funcionou, comecei a suspeitar que o seletor de ID do javascript estava quebrado - talvez houvesse vários itens no DOM com o mesmo ID?A fonte não mostrou que existiam, mas percorrendo todos os divs usando javascript descobri que era esse o caso.Aqui está a função que acabei usando para mostrar o pop-up:

function openPopup(popupID)
{
  var divs = getObjectsByTagAndClass('div','popupDiv');
  if (divs != undefined && divs != null)
  {
    for (var i = 0; i < divs.length; i++)
    {
      if (divs[i].id == popupID)
        divs[i].style.display = 'block';        
    }
  }
}

(função utilitária getObjectsByTagAndClass não listada)

O ideal é descobrir por que o mesmo item está sendo inserido várias vezes, mas não tenho controle sobre a plataforma de renderização, apenas suas entradas.

Então, ao depurar problemas como esse, lembre-se de verificar se há IDs duplicados no DOM, o que pode quebrar getElementById.

A todos que responderam, obrigado pela ajuda!

Outras dicas

Você pode fornecer alguma marcação que reproduza o erro?Sua situação deve ter algo a ver com seu código, já que consigo fazer isso funcionar no IE, FF3 e Opera 9.5:

function show() {
  var d = document.getElementById('testdiv');
  d.style.display = 'block';
}
#testdiv {
  position: absolute;
  height: 20px;
  width: 20px; 
  display: none;
  background-color: red;
}
<div id="testdiv"></div>
<a href="javascript:show();">Click me</a>

Encontrei a resposta:Preciso usar o seguinte para que funcione em ambos os navegadores:

document.getElementById('editRow').style.display = '';

Na verdade, eu estava enfrentando o mesmo problema que você está descrevendo aqui.O que realmente resolveu meu problema foi alterar as propriedades do documento.

Especificação antiga de DOCTYPE/html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Substituído por

<html>

Verifique o console de erros (Menu Ferramentas > Console de Erros no Firefox 3) para ter certeza de que não há outro erro que você não esteja vendo, o que está impedindo o funcionamento do seu script.

Tente definir a altura e a largura do div e certifique-se de que ele esteja no topo, definindo seu índice z mais alto do que todo o resto.Se o div absolutamente posicionado estiver dentro de um elemento relativamente posicionado, sua localização superior e esquerda será baseada na parte superior e esquerda do elemento relativamente posicionado.Tente colocar sua div logo abaixo do elemento body.

Você deve escrever um window.onload método:

window.onload = document.getElementById('testdiv').style.display='inline';

Ou você também pode criar uma variável:

var d = document.getElementById('testdiv');
window.onload = d.style.display = 'inline';

Há um erro de exibição irritante no Firefox 3.5, mas não no IE7 ou Firefox 2.0.9

Tenho 3 posições de DIV absolutas - a primeira com texto simples;o segundo com menu CSS (tipo sucklefish com UL e LI) e o terceiro idem.O terceiro não será exibido mesmo que a codificação tenha sido verificada e considerada perfeita com o validador HTML do W3C.

Como medida temporária, fundi o conteúdo do segundo e do terceiro DIV.

As coisas devem estar ruins na Mozilla quando o IE7 e o FF2 exibem OK, mas não o FF 3.5

Vou te dar uma GRANDE dica:

<div style="..." class="..."> ... </div>

Se você tem algo com estilo, então document.style funcionará!Se você tiver algo em classe, isso não aparecerá em document.style e class="..." irá SUBSTITUIR!

Pense nisso e isso esclarecerá MUITAS QUESTÕES.Apenas este pequeno entendimento irá livrá-lo deste VÍRUS DA MENTE.Tenha um bom dia.Felicidades, Ron Lentjes, LC CLS.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top