style.display funktioniert nicht in Firefox, Opera, Safari – IE7 OK

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

  •  08-06-2019
  •  | 
  •  

Frage

Ich bin absolut positioniert div die ich anzeigen möchte, wenn der Benutzer auf einen Link klickt.Der onclick des Links ruft eine js-Funktion auf, die die Anzeige des Div auf Block setzt (auch versucht:"", inline, table-cell, inline-table, usw).Das funktioniert großartig in IE7, überhaupt nicht in jedem anderen Browser, den ich ausprobiert habe (FF2, FF3, Opera 9.5, Safari).

Ich habe versucht, vor und nach dem Anruf Benachrichtigungen hinzuzufügen, und sie zeigen, dass sich die Anzeige geändert hat none Zu block aber die div wird nicht angezeigt.

Ich kann das bekommen div in FF3 anzuzeigen, wenn ich den Anzeigewert mit dem HTML-Inspektor von Firebug ändere (aber nicht durch Ausführen von Javascript über die Firebug-Konsole) – ich weiß also, dass es nicht nur außerhalb des Bildschirms usw. angezeigt wird.

Ich habe alles versucht, was mir einfiel, einschließlich:

  • Verwendung eines anderen Dokumenttyps (XHTML 1, HTML 4 usw.)
  • Verwenden der Sichtbarkeit sichtbar/ausgeblendet anstelle von Anzeigeblock/keine
  • Verwendung von Inline-Javascript anstelle eines Funktionsaufrufs
  • Tests an verschiedenen Maschinen

Irgendwelche Ideen, was dies verursachen könnte?

War es hilfreich?

Lösung 2

Da das Festlegen der Eigenschaften mit Javascript nie zu funktionieren schien, das Festlegen mit Firebugs Inspect jedoch schon, begann ich zu vermuten, dass der Javascript-ID-Selektor defekt war – vielleicht gab es im DOM mehrere Elemente mit derselben ID?Die Quelle zeigte nicht, dass es solche gab, aber als ich alle Divs mit Javascript durchlief, stellte ich fest, dass dies der Fall war.Hier ist die Funktion, die ich letztendlich verwendet habe, um das Popup anzuzeigen:

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

(Dienstprogrammfunktion getObjectsByTagAndClass nicht aufgeführt)

Im Idealfall finde ich heraus, warum dasselbe Element mehrmals eingefügt wird, aber ich habe keine Kontrolle über die Rendering-Plattform, sondern nur über deren Eingaben.

Wenn Sie also solche Probleme beheben, Denken Sie daran, im DOM nach doppelten IDs zu suchen, die getElementById beschädigen können.

An alle, die geantwortet haben, vielen Dank für Ihre Hilfe!

Andere Tipps

Können Sie ein Markup bereitstellen, das den Fehler reproduziert?Ihre Situation muss etwas mit Ihrem Code zu tun haben, da ich dies unter IE, FF3 und Opera 9.5 zum Laufen bringen kann:

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>

Habe die Antwort gefunden:Ich muss Folgendes verwenden, damit es in beiden Browsern funktioniert:

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

Tatsächlich hatte ich das gleiche Problem, das Sie hier beschreiben.Was mein Problem tatsächlich behoben hat, war die Änderung der Dokumenteigenschaften.

Alte DOCTYPE/html-Spezifikation

<!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">

Ersetzt mit

<html>

Überprüfen Sie die Fehlerkonsole (Menü „Extras“ > „Fehlerkonsole“ in Firefox 3), um sicherzustellen, dass kein weiterer Fehler auftritt, den Sie nicht sehen und der dazu führt, dass Ihr Skript nicht mehr funktioniert.

Versuchen Sie, die Höhe und Breite des Div festzulegen, und stellen Sie sicher, dass es oben liegt, indem Sie seinen Z-Index höher als alles andere einstellen.Wenn sich das absolut positionierte Div innerhalb eines Elements befindet, das relativ positioniert ist, basiert seine obere und linke Position auf der Oberseite und der linken Seite des relativ positionierten Elements.Versuchen Sie, Ihr Div direkt unter dem Body-Element zu platzieren.

Sie müssen eine schreiben window.onload Methode:

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

Oder Sie können auch eine Variable erstellen:

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

Unter Firefox 3.5 gibt es einen störenden Anzeigefehler, nicht jedoch unter IE7 oder Firefox 2.0.9

Ich habe 3 absolute DIV-Positionen – das erste mit Klartext;das zweite mit einem CSS-Menü (Sucklefish-Typ mit UL und LI) und das dritte dito.Der dritte wird überhaupt nicht angezeigt, obwohl die Codierung mit dem HTML-Validator des W3C überprüft und für perfekt befunden wurde.

Als vorübergehende Maßnahme habe ich die Inhalte des zweiten und dritten DIV zusammengeführt.

Bei Mozilla muss es schlecht laufen, wenn IE7 und FF2 OK anzeigen, FF 3.5 aber nicht

Ich gebe Ihnen einen GROSSEN Hinweis:

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

Wenn Sie etwas Stilvolles haben, dann funktioniert document.style!Wenn Sie etwas in der Klasse haben, wird es nicht in document.style angezeigt und class="..." wird es ÜBERSCHREITEN!

Denken Sie darüber nach und das wird SO VIELE PROBLEME klären.Nur dieses eine kleine Verständnis wird Sie von diesem GEISTVIRUS BEFREIEN.Haben Sie einen guten Tag.Prost, Ron Lentjes, LC CLS.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top