簡單的導航欄不能在IE6中工作？

我已經做了一個水平導航欄去我的網站，它不能正確顯示在IE6中。簡單的導航欄不能在IE6中工作？

這是一個非常簡單的導航欄，我不知道什麼是有效的，什麼不工作在IE6中。

任何人都可以看到我的CSS有什麼問題嗎？

感謝

HTML：

<div id="controlslider"> 
<ul> 
<li><a href="#slider2">Work, Life: Balanced.</a></li> 
<li><a href="#slider3">Mobilise your workforce.</a></li> 
<li><a href="#slider4">Built for business.</a></li> 
<li><a href="#slider5">Work whenever, wherever.</a></li> 
<li><a href="#slider6">Where to buy.</a></li> 
</ul> 
</div>

CSS：

#controlslider{ 
    width: 981px; 
    height: 50px; 
    background: url(http://s361608839.websitehome.co.uk/images/respmod_menu.gif) no-repeat; 
    margin: 0 auto; 
    padding: 0; 
    text-align: left; 
    margin-top: -25px; 
    list-style: none; 
    overflow: hidden; 
} 
#controlslider ul{ 
    list-style: none; 
    display: block; 
    margin-left: -36px; 
    margin-top: 0; 
    list-style-type: none; 
} 
#controlslider li{ 
display: inline-block !important; 
padding: 5px 0px 0 0; 
width: 190px; 
height: 35px; 
position: relative; 
overflow: hidden; 
} 
#controlslider li a{ 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 14px; 
    color : white; 
    text-decoration: none; 
    display: block !important; 
    width: 190px; 
    height: 35px; 
    text-align: center; 
    padding-top: 10px; 
} 
#controlslider li a:hover{ 
    background: url(http://s361608839.websitehome.co.uk/images/respmod_menu_button.png); 
    width: 190px; 
    height: 35px; 
}

來源

2011-07-11 Tim

嘗試block和float而不是inline-block。

#controlslider li{ 
    display: block !important; 
    float: left; 
    padding: 5px 0px 0 0; 
    width: 190px; 
    height: 35px; 
    position: relative; 
    overflow: hidden; 
}

請確保在UL之後清除浮動。

來源

2011-07-11 11:30:58 DanielB

謝謝，剛剛嘗試過，它顯示在這裏確定：http://jsfiddle.net/PVS5B/7/，但仍然沒有運氣與任何東西在IE6中正確顯示:-( – Tim

@Tim介意截圖是什麼你的ie6錯了嗎？我在這個jsfiddle上使用了netrenderer，並且我沒有看到任何錯誤或不同 – Joonas

@Lollero這是我剛剛拿到的一個屏幕抓圖http://i.imgur.com/MhTRP.jpg - 導航欄位於底部。使用Adobe Browserlab完成測試，因爲我在Mac上 – Tim

林不解你的兩個負邊緣。

至少第一個似乎有一些邏輯，因爲你似乎使用它來移動菜單，但你永遠不應該修復負邊界問題。

第二個負邊距對我來說沒有任何意義，因爲它搞砸了菜單。

事情並沒有正確顯示，至少因爲你有這兩個負利潤率。（不一定在你的問題上說它的問題，但它肯定是一個問題。）

你應該擺脫這些。

#controlslider{ 
     margin-top: -25px; 
} 
#controlslider ul{ 
     margin-left: -36px; 
}

編輯：我想說明的是，所有的使用負邊緣。問題的關鍵在於，如果通過提煉代碼來修復代碼，那麼使用負邊距修復代碼效率不高。這甚至可能導致一些問題。

來源

2011-07-11 11:34:04 Joonas

簡單的導航欄不能在IE6中工作？

回答

相關問題