부트 스트랩 드롭 다운 메뉴 - IE7 내가 그래서 몇 가지 간단한 빠른 사용 드롭 다운 메뉴를 만들 클래스를 자신의 '드롭 다운 메뉴'를 사용하고 <a href="http://twitter.github.io/bootstrap/index.html" rel="noreferrer">http://twitter.github.io/bootstrap/index.html</a></p> <p>부트 스트랩 2.3.1을 사용하고

Question

하지만 몇 가지 이유 에 IE7이 내 사이트의 텍스트 및 기타 요소 뒤에 표시됩니다.

테스트 링크 : 내 CSS에 Z- 인덱스를 추가http://leongaban.com/_projects/defakto/CDS/

는하지만, 여전히 아무것도하지 않는 것, 도와주세요!

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

IE9, 크롬, FF 및 다른 현대없고 두통 브라우저 :

---

IE7> :(

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> 

Answer 1

그것 stacking context 문제!

드롭 다운에서 z-index을 사용하더라도 동일한 스태킹 컨텍스트의 요소에만 관련됩니다. 이 작업을 수행하려면 z-index 및 position을 상위 요소에 추가해야합니다. 이 경우에 나는 header-top을 추천합니다 div

Answer 2

당신은 할 수 있습니다 우리 위치 요소 E z-index (상대/절대 고정)이므로 추가 시도 :

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

Answer 3

UI-Bootstrap lib의 최신 버전에서 "append-to vs. append-to-body vs. inline example"을 확인하십시오.

Answer 4

부모 요소의 Z- 인덱스를 증가 시키면 (다른 답변에서 언급 한 것처럼) 부모 요소 중 하나에 "overflow : hidden;"이있는 것일 수 있습니다. 제거하고 작동하는지보십시오.

Answer 5

상속 또는 공개로 오버플로 만하면됩니다.

문제가 해결됩니다.

overflow: visible !important;

는 내가 부모 요소에

overflow-x: hidden; 

를 사용할 때 같은 일이 발생했다 놀랍도록 나를 위해

Answer 6

을했다. 그것을 꺼야했다.