CSS Only菜單，IE7問題

我一直在爭取讓所有版本的IE瀏覽器都能運行我的CSS菜單，而且我認爲我幾乎已經將它取下來了，IE7除外。CSS Only菜單，IE7問題

在the site in question，我使用了下面的CSS：

.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>

這似乎爲孩子菜單的工作，但上級菜單項目似乎採用塊佈局，而不是inline-block。我在這個時候試圖與IE打交道，並且會感激一雙額外的雙眼。

來源

2013-03-05 Eric Martindale

嘗試正常關閉您的li標籤：

<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>

- 編輯 -

使用這個在你的CSS：

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

應該做的伎倆。

來源

2013-03-05 10:22:25 otinanai

謝謝，我在示例中缺少一個（並已修復它），但生產中並非如此。 – 2013-03-05 10:24:03

另外你的html引用了'header-bar'和你的css到'.header-bar' – otinanai 2013-03-05 10:35:28

請看看我的答案編輯。 – otinanai 2013-03-05 10:43:03

有幾件事。

<LI>標籤沒有正確關閉。
不支持display: inline-block;。

要做到：

關閉所有<li>標籤正確。

使用此CSS：

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

驗證問題

如果還是你真的擔心沒有一個黑客，你可以做到這一點。使用保羅愛爾蘭的條件HTML類是這樣的：

<!--[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，你可以給這個：

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

現在你的HTML和CSS都是有效。

來源

2013-03-05 11:09:07

CSS Only菜單，IE7問題

回答

相關問題