Bootstrap-Dropdown-Listen-Menüs hinter anderen Elementen erscheinen - IE7

I Bootstrap ist mit 2.3.1 http://twitter.github.io/bootstrap/index.html Bootstrap-Dropdown-Listen-Menüs hinter anderen Elementen erscheinen - IE7

So ihrem Ich verwende ‚Drop-Down-Menü‘ Klasse einig einfachen schnelle Verwendung Dropdown-Menüs zu erstellen, aber aus irgendeinem Grunde auf IE7 erscheinen sie hinter Text und anderen Elementen auf meiner Website.

-Test-Link:http://leongaban.com/_projects/defakto/CDS/

ich z-index zu meinem CSS hinzugefügt, aber immer noch nichts zu tun scheint, bitte helfen!

.header .header-nav ul#nav-account ul.dropdown-menu, 
.header .header-nav ul#nav-library ul.dropdown-menu { 
    z-index: 10000; 
}

IE9, Chrome, FF und andere moderne keine Kopfschmerzen Browser: enter image description here

IE7> :(
enter image description here

HTML

<div class="header-nav"> 

<ul id="nav-account" role="navigation" class="pull-right"> 

    <!-- Language Dropdown Button --> 
    <li id="language-btn"> 
     <a href="#" id="drop1" class="dropdown-toggle" data-toggle="dropdown">English</a> 
     <img src="img/header-small-down-arrow.png" alt="grey triangle"/><!-- <span class="grey_triangle"></span>--> 

     <!-- Language Dropdown Menu--> 
     <ul class="dropdown-menu" role="menu" aria-labelledby="drop1"> 
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">English</a></li> 
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Spanish</a></li> 
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">German</a></li> 
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Japanese</a></li> 
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Chinese</a></li> 
     </ul> 
    </li> 

    <!-- User Dropdown Button --> 
    <li id="account-btn"> 
     <a href="#" id="drop2" class="dropdown-toggle" data-toggle="dropdown">Logout</a> 
     <img src="img/header-small-down-arrow.png" alt="grey triangle"/> 
     <!-- <span class="grey_triangle"></span> --> 

     <!-- User Dropdown Menu--> 
     <ul class="dropdown-menu" role="menu" aria-labelledby="drop2"> 
      <li role="presentation"><a role="menuitem" tabindex="-1" href="http://google.com">Logout</a></li> 
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#anotherAction">Account</a></li> 
     </ul> 
    </li> 
</ul>

Quelle

2013-04-22 Leon Gaban

Könnten Sie '$ ('. Dropdown-menu') versuchen. AppendTo ($ (" body "));'? Wenn es nicht funktioniert, können Sie stattdessen eine andere Klasse ausprobieren. Drop-Down-Menü, aber es wird das Problem beheben, denke ich. –

Hmm habe gerade beide Optionen ausprobiert, die Jquery hat nichts gemacht (aber die Nicht-IE7-Dropdowns gebrochen) und ich habe das .dropdown-Menü in .dropdown-menu1 umbenannt und immer noch das gleiche Problem :( –

Es ist ein stacking context Problem!

Auch wenn Sie z-index für das Dropdown verwenden, ist es nur relativ zu Elementen im gleichen Stapelkontext. Sie müssen eine z-index und eine position zu einem übergeordneten Element hinzufügen, um dies zum Funktionieren zu bringen. In diesem Fall würde ich die aus den "append-to vs. append-to-body vs. inline example" auf der neuesten Version von UI-Bootstrap lib header-topdiv

Quelle

2013-04-22 20:42:35

Und danke! Ich habe die Position hinzugefügt: relativ zu einigen Container divs und es hat mein Problem behoben :) IE7 & 8 kann nicht schnell genug sterben ... –

Danke, hatte das gleiche Problem mit Safari auf IOS6. – Rocklan

Danke für den Hinweis: Stapeln. Wenn sich zwei Elemente überlappen, legen Sie die relative Position für das übergeordnete Element fest. –

können Sie nur uns e z-index auf positionierte Elemente (relativ ungeregelt/absolut), so versuchen Sie:

.header .header-nav ul#nav-account ul.dropdown-menu, 
.header .header-nav ul#nav-library ul.dropdown-menu { 
    position: relative; 
    z-index: 10000; 
}

Quelle

2013-04-22 20:23:11 Adrift

prüfen empfehlen.

Quelle

2016-03-17 14:23:25 tiago

Wenn das Erhöhen des Z-Index des Elternelements (wie in anderen Antworten erwähnt) nicht für Sie funktioniert hat, könnte eines der Elternelemente "overflow: hidden" sein. Versuchen Sie es zu entfernen und sehen Sie, ob es funktioniert.

Quelle

2017-07-06 23:46:30 el3ati2

Oh man, ich war mit diesem für einige Stunden fest und sah Ihre Antwort. Ich danke dir sehr! –

Machen Sie einfach Überlauf als erben oder sichtbar.

wird es das Problem lösen.

overflow: visible !important;

Es funktionierte für mich awesomely

Quelle

2017-10-02 07:15:13

arbeitete für mich, vielen Dank! – Houve

-1

hatte ich das gleiche passiert, wenn

overflow-x: hidden;

Auf dem Element Eltern verwenden. Musste es abstellen.

Quelle

2018-01-24 02:46:36

Bootstrap-Dropdown-Listen-Menüs hinter anderen Elementen erscheinen - IE7

Antwort

Verwandte Themen