style.display non funziona in Firefox, Opera, Safari - IE7 OK

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

  •  08-06-2019
  •  | 
  •  

Domanda

Ho un posizionamento assoluto div che voglio mostrare quando l'utente fa clic su un collegamento.IL onclick del collegamento chiama una funzione js che imposta la visualizzazione del div da bloccare (provato anche:"", inline, table-cell, inline-table, eccetera).Funziona benissimo in IE7, per niente in tutti gli altri browser che ho provato (FF2, FF3, Opera 9.5, Safari).

Ho provato ad aggiungere avvisi prima e dopo la chiamata e mostrano che il display è cambiato da none A block ma il div non viene visualizzato.

Posso ottenere il div da visualizzare in FF3 se cambio il valore di visualizzazione utilizzando l'ispettore HTML di Firebug (ma non eseguendo javascript tramite la console di Firebug) - quindi so che non viene solo visualizzato fuori schermo, ecc.

Ho provato tutto quello che mi viene in mente, incluso:

  • Utilizzo di un tipo di documento diverso (XHTML 1, HTML 4, ecc.)
  • Utilizzo della visibilità visibile/nascosta anziché visualizza blocco/nessuno
  • Utilizzo di JavaScript in linea invece di una chiamata di funzione
  • Test da diverse macchine

Qualche idea su cosa potrebbe causare questo?

È stato utile?

Soluzione 2

Poiché l'impostazione delle proprietà con JavaScript non sembrava mai funzionare, ma l'impostazione tramite l'ispezione di Firebug funzionava, ho iniziato a sospettare che il selettore dell'ID JavaScript fosse rotto: forse c'erano più elementi nel DOM con lo stesso ID?La fonte non mostrava che esistessero, ma scorrendo tutti i div utilizzando javascript ho scoperto che era così.Ecco la funzione che ho finito per utilizzare per mostrare il popup:

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

(funzione di utilità getObjectsByTagAndClass non elencata)

Idealmente, scoprirò perché lo stesso elemento viene inserito più volte, ma non ho il controllo sulla piattaforma di rendering, solo sui suoi input.

Quindi, quando si esegue il debug di problemi come questo, ricordati di verificare la presenza di ID duplicati nel DOM, che possono interrompere getElementById.

A tutti quelli che hanno risposto, grazie per il vostro aiuto!

Altri suggerimenti

Potete fornire qualche markup che riproduca l'errore?La tua situazione deve avere qualcosa a che fare con il tuo codice poiché posso farlo funzionare su 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>

Trovato la risposta:Devo utilizzare quanto segue per farlo funzionare su entrambi i browser:

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

In realtà stavo riscontrando lo stesso problema che stai descrivendo qui.Ciò che effettivamente ha risolto il mio problema è stato modificare le proprietà del documento.

Vecchia specifica 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">

Sostituito con

<html>

Controlla la console degli errori (menu Strumenti > Console degli errori in Firefox 3) per assicurarti che non si verifichi un altro errore che non vedi, che impedisce il funzionamento dello script.

Prova a impostare l'altezza e la larghezza del div e assicurati che sia in alto impostando il suo z-index più in alto rispetto a tutto il resto.Se il div posizionato in modo assoluto si trova all'interno di un elemento posizionato in modo relativo, la sua posizione in alto e a sinistra si basa sulla parte superiore e a sinistra dell'elemento in posizione relativa.Prova a mettere il tuo div appena sotto l'elemento body.

Devi scrivere a window.onload metodo:

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

Oppure puoi anche creare una variabile:

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

C'è un fastidioso errore di visualizzazione su Firefox 3.5 ma non su IE7 o Firefox 2.0.9

Ho 3 posizioni DIV assolute: la prima con testo semplice;il secondo con un menu CSS (tipo sucklefish con UL e LI) e il terzo idem.Il terzo non verrà visualizzato affatto anche se la codifica è stata controllata e trovata perfetta con il validatore HTML del W3C.

Come misura temporanea, ho unito i contenuti del secondo e del terzo DIV.

Le cose devono andare male in Mozilla quando IE7 e FF2 mostrano OK ma non FF 3.5

Ti do un GRANDE suggerimento:

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

Se hai qualcosa in stile, allora document.style funzionerà!Se hai qualcosa in classe, non verrà visualizzato in document.style e class="..." lo OVERRIDE!

Pensaci e questo risolverà TANTI PROBLEMI.Solo questa piccola comprensione ti libererà da questo VIRUS DELLA MENTE.Buona giornata.Saluti, Ron Lentjes, LC CLS.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top