Dans Firefox 2, l'utilisation du débordement: caché fait que les autres divs se chevauchent div div

Lorsque j'utilise le débordement: caché pour div qui est positionné en absolu (pour le menu), les autres div chevauchent. Voici le code. Cela fonctionne bien dans FF3. Toute aide appréciée. S'il vous plaît noter que html devrait être tel qu'il est. Aussi, si vous pouvez fournir une solution, juste en changeant les styles de menu div (le div qui contient le texte du menu), il est plus utile pour moi. Merci à l'avanceDans Firefox 2, l'utilisation du débordement: caché fait que les autres divs se chevauchent div div

Voici le code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<title>Title of the document</title> 
</head> 

<body> 
<div style="position:relative"> 
    <div> 
     <div style="height:20px;overflow:hidden"> 
      <div style="position:absolute;width:200px;height:100px;top:0px;background-color:black;z-index:1">menu</div> 
     </div>  
    </div> 

    <div style="position:relative;height:200px;background-color:gray;"></div> 
</div> 
</body> 

</html>

Source

2010-06-05 Shankar

Apparemment, FF2 a quelques problèmes connus avec overflow et z-index. (Voir this google search)

Il existe probablement une solution de contournement, mais nous devrons savoir ce que vous essayez d'accomplir avec overflow: hidden. Il est difficile de dire à partir de votre code, car il n'a pas vraiment d'effet - supprimer overflow:hidden obtient entièrement le résultat que vous recherchez.

Source

2010-06-05 19:44:15 matthewwithanm

Merci Matthew. Oui, le code que j'ai fourni ici est juste un exemple d'application originale où nous sommes confrontés à un problème d'utilisation de débordement (Même dans l'application originale, la structure html est presque la même). Comme l'application est en production et que le code a été développé par quelqu'un d'autre, je n'ai pas beaucoup d'option à part changer le CSS pour le menu div. Changer n'importe quel autre css ou html nécessiterait des tests de régression en profondeur que nous n'avons pas les moyens de faire à partir de maintenant. – Shankar

Je comprends. Je suppose que ce que je me demandais était ce que le débordement est censé accomplir. Si cela ne masque rien, vous pouvez simplement définir un débordement: visible dessus et éviter le problème. – matthewwithanm

Merci beaucoup Matthew, je vais le définir comme débordement: visible pour l'instant et vérifiez s'il ne pose aucun problème dans d'autres domaines. – Shankar

Dans Firefox 2, l'utilisation du débordement: caché fait que les autres divs se chevauchent div div

Répondre

Questions connexes