style.display no funciona en Firefox, Opera, Safari - IE7 OK

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

  •  08-06-2019
  •  | 
  •  

Pregunta

tengo una absolutamente posicionada div que quiero mostrar cuando el usuario hace clic en un enlace.El onclick del enlace llama a una función js que configura la visualización del div para bloquear (también probé:"", inline, table-cell, inline-table, etc).Esto funciona muy bien en IE7, no en todos los demás navegadores que he probado (FF2, FF3, Opera 9.5, Safari).

Intenté agregar alertas antes y después de la llamada, y muestran que la pantalla ha cambiado de none a block pero el div no se muestra.

puedo conseguir el div para mostrar en FF3 si cambio el valor de visualización usando el inspector HTML de Firebug (pero no ejecutando javascript a través de la consola de Firebug), así sé que no solo aparece fuera de la pantalla, etc.

He probado todo lo que se me ocurre, incluido:

  • Usando un tipo de documento diferente (XHTML 1, HTML 4, etc.)
  • Usar visibilidad visible/oculta en lugar de mostrar bloque/ninguno
  • Usar javascript en línea en lugar de una llamada de función
  • Pruebas desde diferentes máquinas.

¿Alguna idea sobre qué podría causar esto?

¿Fue útil?

Solución 2

Dado que configurar las propiedades con javascript nunca pareció funcionar, pero configurar usando la inspección de Firebug sí, comencé a sospechar que el selector de ID de JavaScript estaba roto: ¿tal vez había varios elementos en el DOM con el mismo ID?La fuente no mostró que los hubiera, pero al recorrer todos los divs usando javascript descubrí que ese era el caso.Esta es la función que terminé usando para mostrar la ventana emergente:

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';        
    }
  }
}

(la función de utilidad getObjectsByTagAndClass no aparece en la lista)

Lo ideal sería descubrir por qué se inserta el mismo elemento varias veces, pero no tengo control sobre la plataforma de renderizado, solo sus entradas.

Entonces, al depurar problemas como este, recuerde verificar si hay ID duplicados en el DOM, lo que puede romper getElementById.

A todos los que respondieron, ¡gracias por su ayuda!

Otros consejos

¿Puede proporcionar algún marcado que reproduzca el error?Su situación debe tener algo que ver con su código ya que puedo hacer que funcione en IE, FF3 y 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>

Encontré la respuesta:Necesito usar lo siguiente para que funcione en ambos navegadores:

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

En realidad, estaba experimentando el mismo problema que estás describiendo aquí.Lo que realmente solucionó mi problema fue cambiar las propiedades del documento.

Antigua especificación 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">

Reemplazadas con

<html>

Verifique la consola de errores (Menú Herramientas > Consola de errores en Firefox 3) para asegurarse de que no haya otro error que no esté viendo y que impida que su secuencia de comandos funcione.

Intente configurar la altura y el ancho del div y asegúrese de que esté en la parte superior configurando su índice z más alto que todo lo demás.Si el div en posición absoluta está dentro de un elemento que está en posición relativa, su ubicación superior e izquierda se basa en la parte superior e izquierda del elemento en posición relativa.Intenta poner tu div justo debajo del elemento del cuerpo.

Debes escribir un window.onload método:

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

O también puedes hacer una variable:

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

Hay un molesto error de visualización en Firefox 3.5 pero no en IE7 o Firefox 2.0.9

Tengo la posición absoluta de 3 DIV: el primero con texto sin formato;el segundo con un menú CSS (tipo lechona con UL y LI) y el tercero ídem.El tercero no se mostrará en absoluto a pesar de que se haya verificado la codificación y se haya comprobado que es perfecta con el validador HTML del W3C.

Como medida temporal, he fusionado el contenido del segundo y tercer DIV.

Las cosas deben estar mal en Mozilla cuando IE7 y FF2 se muestran bien pero no FF 3.5

Te daré una GRAN pista:

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

Si tienes algo con estilo, ¡document.style funcionará!Si tiene algo en clase, no aparecerá en document.style y class="..." ¡LO ANULARÁ!

Piensa en esto y esto aclarará MUCHOS PROBLEMAS.Sólo esta pequeña comprensión te LIBRARÁ de este VIRUS MENTAL.Que tenga un buen día.Saludos, Ron Lentjes, LC CLS.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top