style.display ne fonctionne pas dans Firefox, Opera, Safari - IE7 OK

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

  •  08-06-2019
  •  | 
  •  

Question

J'ai une position absolument div que je veux montrer lorsque l'utilisateur clique sur un lien.Le onclick du lien appelle une fonction js qui définit l'affichage du div pour bloquer (également essayé :"", inline, table-cell, inline-table, etc).Cela fonctionne très bien dans IE7, pas du tout dans tous les autres navigateurs que j'ai essayés (FF2, FF3, Opera 9.5, Safari).

J'ai essayé d'ajouter des alertes avant et après l'appel, et elles montrent que l'affichage a changé de none à block mais le div ne s’affiche pas.

je peux obtenir le div à afficher dans FF3 si je modifie la valeur d'affichage à l'aide de l'inspecteur HTML de Firebug (mais pas en exécutant javascript via la console de Firebug) - donc je sais que cela n'apparaît pas simplement hors écran, etc.

J'ai essayé tout ce à quoi je peux penser, notamment :

  • Utiliser un doctype différent (XHTML 1, HTML 4, etc.)
  • Utilisation de la visibilité visible/cachée au lieu du bloc d'affichage/aucun
  • Utiliser du javascript en ligne au lieu d'un appel de fonction
  • Tests à partir de différentes machines

Des idées sur ce qui pourrait causer cela ?

Était-ce utile?

La solution 2

Étant donné que la définition des propriétés avec javascript n'a jamais semblé fonctionner, mais la configuration à l'aide de l'inspection de Firebug l'a fait, j'ai commencé à soupçonner que le sélecteur d'ID javascript était cassé - peut-être qu'il y avait plusieurs éléments dans le DOM avec le même ID ?La source n'a pas montré qu'il y en avait, mais en parcourant tous les divs en utilisant javascript, j'ai trouvé que c'était le cas.Voici la fonction que j'ai fini par utiliser pour afficher la fenêtre contextuelle :

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

(fonction utilitaire getObjectsByTagAndClass non répertoriée)

Idéalement, je découvrirai pourquoi le même élément est inséré plusieurs fois, mais je n'ai pas de contrôle sur la plateforme de rendu, juste sur ses entrées.

Ainsi, lors du débogage de problèmes comme celui-ci, n'oubliez pas de vérifier les identifiants en double dans le DOM, ce qui peut interrompre getElementById.

À tous ceux qui ont répondu, merci pour votre aide !

Autres conseils

Pouvez-vous fournir un balisage reproduisant l'erreur ?Votre situation doit avoir quelque chose à voir avec votre code puisque je peux le faire fonctionner sur IE, FF3 et 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>

J'ai trouvé la réponse :Je dois utiliser ce qui suit pour que cela fonctionne sur les deux navigateurs :

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

En fait, je rencontrais le même problème que vous décrivez ici.Ce qui a réellement résolu mon problème, c'est la modification des propriétés du document.

Ancienne spécification 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">

Remplacé par

<html>

Vérifiez la console d'erreurs (Menu Outils > Console d'erreurs dans Firefox 3) pour vous assurer qu'il n'y a pas d'autre erreur que vous ne voyez pas, qui empêche votre script de fonctionner.

Essayez de définir la hauteur et la largeur du div et assurez-vous qu'il est au-dessus en définissant son z-index plus haut que tout le reste.Si le div en position absolue se trouve à l'intérieur d'un élément positionné de manière relative, son emplacement en haut et à gauche est basé sur le haut et la gauche de l'élément en position relative.Essayez de placer votre div juste sous l'élément body.

Vous devez écrire un window.onload méthode:

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

Ou vous pouvez également créer une variable :

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

Il y a une erreur d'affichage gênante sur Firefox 3.5 mais pas sur IE7 ou Firefox 2.0.9

J'ai 3 positions absolues de DIV - la première avec du texte brut ;le deuxième avec un menu CSS (type milk-fish avec UL et LI) et le troisième idem.Le troisième ne s'affichera pas du tout même si le codage a été vérifié et jugé parfait avec le validateur HTML du W3C.

À titre temporaire, j'ai fusionné le contenu des deuxième et troisième DIV.

Les choses doivent aller mal chez Mozilla quand IE7 et FF2 affichent OK mais pas FF 3.5

Je vais vous donner un GROS indice :

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

Si vous avez quelque chose de style, alors document.style fonctionnera !Si vous avez quelque chose en classe, il n'apparaîtra pas dans document.style et class="..." le remplacera !

Pensez-y et cela résoudra TANT DE PROBLEMES.Juste cette petite compréhension vous débarrassera de ce VIRUS DE L’ESPRIT.Passe une bonne journée.Bravo, Ron Lentjes, LC CLS.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top