J’ai isolé un peu cas de test d’IE7 bug, mais ne sais pas comment y remédier. J’ai joué avec tout au long de la journée.
Quel est le problème avec `` dans IE7 ?
Test de CSS :
Test HTML :
Réponses
Trop de publicités?
Z-index n'est pas une mesure absolue. Il est possible pour un élément avec z-index: 1000 à être derrière un élément avec z-index: 1 - tant que les éléments respectifs appartiennent à différents contextes d'empilement.
Lorsque vous spécifiez le z-index, vous êtes le préciser par rapport à d'autres éléments dans le même empilement de contexte, et bien que le CSS du paragraphe sur les Z-index indique un nouveau contexte d'empilement n'est créé que pour le contenu positionné avec un z-index autres que automatique (le sens de l'ensemble de votre document doit être d'un seul contexte d'empilement), vous avez construire une positionné durée: malheureusement IE7 interprète contenu positionné sans z-index comme un nouveau contexte d'empilement.
En bref, essayez d'ajouter ce CSS:
#envelope-1 {position:relative; z-index:1;}
ou de refonte du document telles que votre enjambe n'ont pas de position:relative plus:
<html>
<head>
<title>Z-Index IE7 Test</title>
<style type="text/css">
ul {
background-color: #f00;
z-index: 1000;
position: absolute;
width: 150px;
}
</style>
</head>
<body>
<div>
<label>Input #1:</label> <input><br>
<ul><li>item<li>item<li>item<li>item</ul>
</div>
<div>
<label>Input #2:</label> <input>
</div>
</body>
</html>
Voir http://www.brenelz.com/blog/2009/02/03/squish-the-internet-explorer-z-index-bug/ pour un exemple similaire de ce bug. La raison en donnant un élément parent (enveloppe-1 dans l'exemple) un z-index supérieur fonctionne car alors tous les enfants de l'enveloppe-1 (y compris le menu) se chevauchent tous les frères et sœurs de l'enveloppe-1 (en particulier, l'enveloppe-2).
Bien que le z-index permet de définir explicitement la façon dont les choses se chevauchent, même sans le z-index de l'ordre de superposition est bien défini. Enfin, IE6 a un autre bug qui provoque des fenêtres et des iframes pour flotter au-dessus de tout le reste.
nixis
Points
373
http://www.vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/
$(function() {
var zIndexNumber = 1000;
$('div').each(function() {
$(this).css('zIndex', zIndexNumber);
zIndexNumber -= 10;
});
});
ed1nh0
Points
178
"Dans IE les éléments positionnés génèrent un nouveau contexte d'empilement, en commençant par une valeur z-index de 0. Par conséquent z-index ne fonctionne pas correctement".
Essayez de donner à l'élément parent une valeur d'index z plus élevée (peut même être supérieure à la valeur de l'index z de l'enfant lui-même) pour corriger le bogue.
lukeroxout
Points
31
J'ai rencontré ce problème, mais sur un projet de grande envergure où les modifications HTML a dû être demandé et est devenu un ensemble de la question, alors que je cherchais un pur css solution.
En plaçant position:relative; z-index:-1 sur mon corps principal contenu de l'en-tête déroulant contenu affiche soudain au-dessus du corps contenu dans ie7 (il était déjà l'affichage sans problème dans tous les autres navigateurs et ie8+)
Le problème était alors de cette désactivé tous les survolez et cliquez sur actions sur tout le contenu de l'élément avec l' z-index:-1 je suis donc allé à l'élément parent de l'ensemble de la page et lui a donné un position:relative; z-index:1
Qui fixe la question et a conservé la bonne superposition des fonctionnalités.
Se sent très orthodoxe, mais il a travaillé en tant que de besoin.
eBar Solutions
Points
31
