HTML/CSS, die der IE Nicht anzeigen mein dropdown-Menü z-index bezogen

OK, also ich hatte einen Blick und es gibt gute Nachrichten und schlechte 😉

den filter "Deckkraft" in der #head div bedeutet, dass overflow: hidden ausgelöst werden, weshalb auch keine Menüs (es ist die unglückliche Nebenwirkung der Filter und der überlauf fürchte ich).. entfernen, und Sie können den z-index, die Sie brauchen, sowieso

nächsten zu Holen Sie sich die Transparenz (Opazität) für die dropdowns können Sie einfach rgba(255,255,255,0.9) auf die #nav ul li ul Regel statt #fff; (obwohl verlassen #fff vor, dass die Regel für fallback für Browser, die das nicht tun können rgba() noch.. Lesen Sie mehr!)

Dass fast alle glücklich - jetzt können Sie auch tun rgba() Transparenz für den IE mit dem gradient-filter..

also die Regel, die ich landete mit aussah, wie dieser (in einem IE conditional comment):

#nav ul li ul {
  zoom: 1;
  background: transparent;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5FFFFFF,endColorstr=#E5FFFFFF)"; /* IE8 */    
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5FFFFFF,endColorstr=#E5FFFFFF);   /* IE6 & 7 */    
/*  behavior: url(PIE.htc);*/ /* yuk filter */  
}

und ich dachte, es wäre gut zu gehen..

ABER die Schlechte Nachricht

das Verhalten ist auskommentiert, da Sie können nur eine oder das andere, Transparenz oder abgerundete Ecken 🙁 anscheinend

Ich nicht zu viel Forschung, obwohl, so YMMV

Habe ich auch bemerkt, ein problem oder drei in IE7, nicht sicher, ob Sie unterstützen wollen, dass aber im Falle Sie tun.. oder überprüfen möchten, meine Letzte code die er bekam zu diesem Zeitpunkt klebte ich es in PasteBin

code ersetzt deine Haupt-CSS - die #head Regel und ganzen /*navigation*/section

Update: noch mehr gute Nachrichten und ein wenig schlecht!

du kann haben die Transparenz und die abgerundeten Ecken durch CSS3 PIE eigene -pie-background Eigenschaft, aber nicht die box-Schatten, die Art und Weise PIE beschäftigt sich mit der box-shadow bedeutet, es füllt den div anstatt Zeichnung nur auf der Außenseite, so dass die -pie-background Lesen der rgba hintergrund ist transparent, zeigt aber die graue Farbe für den Schatten!

Meine Lösung:

Ich habe eine Grenze, um make-up für den Verlust von box-shadow, es ist nicht auf der Suche zu schlecht, und es funktioniert über IE ist 😉
hier ist ein update zu der ich eine bedingte Kommentar oben:

<!--[if lte IE 9]>
<style type="text/css" media="screen">
#nav ul li ul  {
    box-shadow: none; 
    -pie-background: rgba(255,255,255,0.9);
    border: 3px double #eee;
    border-width: 0 3px 3px 3px; 
    behavior: url(PIE.htc); /* yuk filter */
}
</style>
<![endif]-->

InformationsquelleAutor clairesuzy

Haben Sie einen Blick auf diese Lösung : http://webdemar.com/webdesign/superfish-jquery-menu-ie-z-index-bug/

Andere Lösung, die ich bereits benutzt, ist ganz einfach, aber ein Schmerz in der *. Sie müssen alle übergeordneten container eine bestimmte niedrigeren z-index-Wert als die, die Sie wollen, um zu zeigen, auf der Oberseite des anderen.

Etwa so :

<parent>//z-index 1
    <child>//zindex 2
         <yourdropdown>//z-index3

Update 1

Menü nicht korrekt angezeigt in meinem chrome so habe ich Fix den #Kopf z-index 80 und es Tat viel besser aus. Tun Sie Folgendes, um das layout das gleiche in IE und Chrome und Firefox. Watch out, obwohl, ich nur getestet, diese änderung auf der homepage.

Hinzufügen .conbox-Klasse :

.conbox  {
position:relative;
}

Logo richtig

#logo {
position:absolute;
left:0px;
top:0px;
}

Entfernen Sie die #nav Positionierung

#nav  {
margin-top:80px;
z-index:3;
}

Das problem ist, ich kann nicht einmal sehen, eine Auswirkung auf die Menü-mouseover im IE!!

InformationsquelleAutor David