CSS 전용 메뉴, IE7 문제

나는 모든 IE 버전에서 작동하는 CSS 전용 메뉴를 얻으려고 노력해 왔으며 IE7을 제외하고는 거의 다 써 버렸다.CSS 전용 메뉴, IE7 문제

.header-bar { 
    position:fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    padding: 0; 
    background: #333; 
    font-size: 1.2em; 
    font-weight: bold; 
    z-index: 1000; 
} 
.header-bar a:hover { 
    text-decoration: none; 
} 
.header-bar a { 
    display: inline-block; 
    padding: 7px 10px 7px 10px; 
    color: #2C8FAA; 
    font-size:1.1em; 
} 
.header-bar ul { 
    list-style-type: none; 
    display: inline-block; 
    position: relative; 
    height: auto; 
} 
.header-bar ul li { 
    background: #333; 
} 
.header-bar ul li:hover { 
    background: #444; 
    color: #34AACB; 
} 
.header-bar ul.nav > li { 
    display: inline-block; 
} 
.header-bar ul ul { 
    display: none; 
} 
.header-bar ul ul li { 
    border-top: 1px solid black; 
} 
.header-bar ul li:hover > ul { 
    margin: 0; 
    display: block; 
    position: absolute; /* overrides other settings */ 
    /* top: 28px; */ 
    height: 28px; 
    min-width: 200px; 
} 
.header-bar ul ul li:hover ul { 
    top: 0; /* match position of parent, which should be position: relative; */ 
    position: absolute; 
    margin-left: 199px; /* 150px min-width -1 px border */ 
    border-left: 1px solid black; 
} 
.header-bar ul li a { 
    display: block; 
} 
.header-bar ul li ul li { 
    position: relative; 
} 
.header-bar ul ul li:hover ul ul { 
    position: absolute; 
    top: -48px; /* 28 + 1 for border */ 
    margin-left: 199px; /* 150px min-width -1 px border */ 
    border-left: 1px solid black; 
} 
.header-bar ul ul li:hover ul ul { 
    top: 0; 
}

스타일의 HTML하려면 다음과 같습니다 :

이 하위 메뉴에 대한 작업 표시

<div class="header-bar"> 
    <div class="container"> 
    <ul class="nav"> 
     <li> 
     <a href="#">Menu Item 1</a> 
     <ul> 
      <li> 
      <a href="#">Menu Item 1, Submenu 1</a> 
      <ul> 
       <li><a href="#">Menu Item 1, Submenu 1, Sub-submenu 1</a></li> 
      </ul> 
      </li> 
     </ul> 
     </li> 
    </ul> 
    </div> 
</div>

하지만 부모 메뉴

the site in question, 나는 다음과 같은 CSS를 사용하고 있습니다 항목이 inline-block 대신 블록 레이아웃을 채택한 것처럼 보입니다. 나는이 시점에서 IE와의 싸움을 시도하는 나의 재치있는 끝에서, 그리고 눈의 두어 여분의 쌍을 고맙게 여길 것이다.

출처

2013-03-05 Eric Martindale

시도는 제대로 li 태그를 닫습니다 : 당신의 CSS에서

<div id="header-bar"> 
    <div class="container"> 
    <ul class="nav"> 
     <li><a href="#">Menu Item 1</a></li> 
     <ul> 
      <li><a href="#">Menu Item 1, Submenu 1</a></li> 
      <ul> 
       <li><a href="#">Menu Item 1, Submenu 1, Sub-submenu 1</a></li> 
      </ul> 
     </ul> 
    </ul> 
    </div> 
</div>

--EDIT--

사용이 :

.header-bar ul.nav > li { 
     display: inline-block; 
     *float:left 
}

그것은 트릭을해야한다.

출처

2013-03-05 10:22:25 otinanai

감사합니다. 예제에서 하나를 놓치고 있었지만 (이후 수정 한 적이 있습니다), 프로덕션에서는 그렇지 않습니다. –

또한 html은'header-bar '를, 여러분의 CSS는'.header-bar'를 나타냅니다. – otinanai

제 답변을 보시고 편집하십시오. – otinanai

몇 가지.

<LI> 태그가 올바르게 닫히지 않았습니다.
display: inline-block;은 지원되지 않습니다.

을 수행합니다

닫기 모든 <li> 태그를 제대로.

사용이 CSS :

.header-bar ul.nav > li { 
    display: inline-block; 
    *display: inline; 
    *zoom: 1; 
}

검증 문제 여전히 해킹을 가지고 있지 정말 걱정하는 경우

, 당신은이 작업을 수행 할 수 있습니다. 모두 유효 있습니다

.ie6 .header-bar ul.nav > li, 
.ie7 .header-bar ul.nav > li { 
    display: inline; 
    zoom: 1; 
}

이제 HTML과 CSS :

<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]--> 
<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]--> 
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]--> 
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]--> 
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->

그리고 CSS에서

, 당신이 줄 수 있습니다 : 폴 아일랜드어의 조건 HTML 수업이 방법을 사용합니다.

출처

2013-03-05 11:09:07

답변

관련 문제