IE7 CSS/Js錯誤

Question

我正在幫朋友做一個小小的jQuery，並且這是一些簡單的CSS工作......但我不是CSS專家，而且事情（像往常一樣）在愚弄IE7 - 我認爲他們在IE8中很好，但客戶需要它在IE7中工作......嗯。

我忘了提及具體問題：

1. 主導航中包含一個下拉。在IE7中它不起作用。
2. 內容/圖片滾動顯得有點滑稽 - 第一張圖片周圍有邊框（應該保留爲背景圖片）。在IE7中，它會滾動第一張圖片。

你能請通過顯示我的錯誤幫助我！我不確定是什麼問題，但我幾乎可以肯定它是CSS相關的...

建議和想法是最受歡迎的！謝謝你的時間！我知道IE有時候會很痛苦！ :)

這裏的開發網站link。

Answer 1

嘗試添加到您的style.css：

li.drop-down > A { 
    text-indent: -4000px; 
    width: 4000px; 
} 

IE 7不會引發MouseEnter事件可能是因爲它無法看到該元素具有如此大的凹痕。至少，添加寬度使其對瀏覽器更爲明顯。

編輯：或者，您可以在li本身而不是錨點上觸發mouseenter。

$("li.drop-down").bind("mouseenter",function(){ 
    var _li=$(this); 
    $(".subMenu").slideUp("fast"); 
    $("."+_li.attr("id")).stop(true, true).slideDown("fast"); 
}); 

至於背景邊框問題，請嘗試將您的UL圖像封裝在普通的DIV中。

<div> 
    <ul style="width: 3100px; margin-left: -384.733px;"><li style="margin-left: -620px; float: left;"><img src="Eastside%20Baptist%20Home%20Page_files/jQueryPlaceHolder4.jpg" alt="Fourth Picture"></li> 
    <li style="float: left;"><img src="Eastside%20Baptist%20Home%20Page_files/jQueryPlaceHolder.jpg" alt="jQueryPlaceHolder"></li> 
    <li style="float: left;"><img src="Eastside%20Baptist%20Home%20Page_files/jQueryPlaceHolder2.jpg" alt="Second Picture"></li> 
    <li style="float: left;"><img src="Eastside%20Baptist%20Home%20Page_files/jQueryPlaceHolder3.jpg" alt="Third Picture"></li> 
    <li style="float: left;"><img src="Eastside%20Baptist%20Home%20Page_files/jQueryPlaceHolder4.jpg" alt="Fourth Picture"></li> 
    <li style="float: left;"><img src="Eastside%20Baptist%20Home%20Page_files/jQueryPlaceHolder.jpg" alt="jQueryPlaceHolder"></li> 
    </ul> 
</div>