在Internet Explorer中CSS滾動問題

Question

我創建了一個組合網站，目前在Safari和Firefox中運行良好，但在IE 5，6和7（而不是8）中存在問題。投資組合部分中的投資組合/關於/聯繫輪轉（純CSS）和縮略圖（純CSS）不能正常工作（除了在啓動頁面上它們可以正常工作）。這些翻轉具有「活動」狀態，以便您知道您正在瀏覽的頁面等。翻轉是一個圖像，底部的活動網站和圖像頂部的非活動網站。

我爲例html頁面代碼如下：

<div id="header" > 
    <img src="images/headerTopPadding.gif" height="23" border="0" align="top"> 
    <ul id="evaNeesemannDesignMenu"> 
    <li id="evaNeesemannDesign" ><a href="../index.html"></a></li> 
    </ul> 
    <ul id="portfolioAboutContactMenu"> 
    <li id="portfolioActive"></li> 
    <li id="about"><a href="about.html"></a></li> 
    <li id="contact"><a href="contact.html"></a></li> 
    </ul> 
    <img src="images/headerTopPadding.gif" border="0" height="23" align="top"> 
    <ul id="thumbnailMenu"> 
    <li id="smsThumbActive"><a href="smsOne.html"></a></li> 
    <li id="m2Thumb"><a href="m2.html"></a></li> 
    <li id="calvinInviteThumb"><a href="calvinInvite.html"></a></li> 
    <li id="calvinMerchThumb"><a href="calvinMerch.html"></a></li> 
    <li id="vantaaThumb"><a href="vantaa.html"></a></li> 
    <li id="nurminenThumb"><a href="nurminen.html"></a></li> 
    <li id="corbThumb"><a href="corbOne.html"></a></li> 
    <li id="bpgThumb"><a href="bpg.html"></a></li> 
    <li id="nineElevenThumb"><a href="nineEleven.html"></a></li> 
    <li id="tomsThumb"><a href="toms.html"></a></li> 
    <li id="deloittePropThumb"><a href="deloitteProp.html"></a></li> 
    <li id="deloitteInfoThumb"><a href="deloitteInfo.html"></a></li> 
    <li id="turnThumb"><a href="turn.html"></a></li> 
    <li id="oedThumb"><a href="oedOne.html"></a></li> 
    <li id="networkThumb"><a href="network.html"></a></li> 
    </ul> 
</div> 

而且該碼的該區域的CSS如下：

#header{ 
position:relative; 
height:120px; 
background-color:#FFFFFF; 
width:100%; 
} 

/* Eva Neesemann Design Menu Rollover */ 

#evaNeesemannDesignMenu { 
position: relative; 
margin: 0px auto; 
padding: 0px; 
width: 194px; 
height: 23px; 
background: url(images/evaNeesemannDesign.gif); 
} 

#evaNeesemannDesignMenu li { 
width: 194px; 
height: 23px; 
position: absolute; 
top: 0px; 
background: url(images/evaNeesemannDesign.gif) 0 -23px no-repeat; 
display: block; 
list-style: none; 
} 

#evaNeesemannDesignMenu a { 
width: 194px; 
height: 23px; 
display: block; 
border: none; 
} 

#evaNeesemannDesignMenu a:hover { 
border: none; 
} 

#evaNeesemannDesignMenu #evaNeesemannDesign { 
left: 0px; 
} 

#evaNeesemannDesignMenu #evaNeesemannDesign a:hover { 
background: url(images/evaNeesemannDesign.gif) 0px 0px no-repeat; 
} 


/* Portfolio About Contact Menu Rollovers */ 

#portfolioAboutContactMenu { 
position: relative; 
margin: 0px auto; 
padding: 0px; 
width: 194px; 
height: 18px; background:url(images/portfolioAboutContact.gif); 
} 

#portfolioAboutContactMenu li { 
width: 194px; 
height: 18px; 
position: absolute; 
top: 0px; 
background: url(images/portfolioAboutContact.gif) 0 0 no-repeat; 
display: block; 
list-style: none; 
} 

#portfolioAboutContactMenu a:hover { 
border: none; 
} 

#portfolioAboutContactMenu #portfolio { 
left: 0px; 
} 

#portfolioAboutContactMenu #portfolioActive { 
left: 0px; 
background-position: 0px -18px; 
} 

#portfolioAboutContactMenu #about { 
left: 75px; 
background-position: -75px 0; 
} 

#portfolioAboutContactMenu #aboutActive { 
left: 75px; 
background-position: -75px -18px; 
} 

#portfolioAboutContactMenu #contact { 
left: 127px; 
background-position: -127px 0; 
} 

#portfolioAboutContactMenu #contactActive { 
left: 127px; 
background-position: -127px -18px; 
} 

#portfolioAboutContactMenu #portfolio a:hover { 
background: url(images/portfolioAboutContact.gif) no-repeat 0px -18px; 
} 

#portfolioAboutContactMenu #about a:hover { 
background: url(images/portfolioAboutContact.gif) no-repeat -75px -18px; 
} 

#portfolioAboutContactMenu #contact a:hover { 
background: url(images/portfolioAboutContact.gif) no-repeat -127px -18px; 
} 

#portfolioAboutContactMenu #portfolio a { 
width: 75px; 
height: 18px; 
display: block; 
border: none; 
} 

#portfolioAboutContactMenu #about a { 
width: 52px; 
height: 18px; 
display: block; 
border: none; 
} 

#portfolioAboutContactMenu #contact a { 
width: 67px; 
height: 18px; 
display: block; 
border: none; 
} 

/* Thumbnail Menu Rollovers */ 

#thumbnailMenu { 
position: relative; 
margin: 0px auto; 
padding: 0px; 
width: 433px; 
height: 27px; 
background:url(images/thumbnails.jpg); 
} 

#thumbnailMenu li { 
width: 433px; 
height: 27px; 
position: absolute; 
top: 0px; 
background: url(images/thumbnails.jpg) 0 0 no-repeat; 
display: block; 
list-style: none; 
} 

#thumbnailMenu a { 
width: 29px; 
height: 27px; 
display: block; 
border: none; 
} 

#thumbnailMenu a:hover { 
border: none; 
} 

#thumbnailMenu #smsThumb { 
left: 0px; 
} 

#thumbnailMenu #smsThumbActive { 
left: 0px; 
background-position: 0px -27px; 
} 

#thumbnailMenu #m2Thumb { 
left: 28px; 
background-position: -28px 0; 
} 

#thumbnailMenu #m2ThumbActive { 
left: 28px; 
background-position: -28px -27px; 
} 

#thumbnailMenu #calvinInviteThumb { 
left: 57px; 
background-position: -57px 0; 
} 

#thumbnailMenu #calvinInviteThumbActive { 
left: 57px; 
background-position: -57px -27px; 
} 

#thumbnailMenu #calvinMerchThumb { 
left: 86px; 
background-position: -86px 0; 
} 

#thumbnailMenu #calvinMerchThumbActive { 
left: 86px; 
background-position: -86px -27px; 
} 

#thumbnailMenu #vantaaThumb { 
left: 115px; 
background-position: -115px 0; 
} 

#thumbnailMenu #vantaaThumbActive { 
left: 115px; 
background-position: -115px -27px; 
} 

#thumbnailMenu #nurminenThumb { 
left: 144px; 
background-position: -144px 0; 
} 

#thumbnailMenu #nurminenThumbActive { 
left: 144px; 
background-position: -144px -27px; 
} 

#thumbnailMenu #corbThumb { 
left: 173px; 
background-position: -173px 0; 
} 

#thumbnailMenu #corbThumbActive { 
left: 173px; 
background-position: -173px -27px; 
} 

#thumbnailMenu #bpgThumb { 
left: 202px; 
background-position: -202px 0; 
} 

#thumbnailMenu #bpgThumbActive { 
left: 202px; 
background-position: -202px -27px; 
} 

#thumbnailMenu #nineElevenThumb { 
left: 231px; 
background-position: -231px 0; 
} 

#thumbnailMenu #nineElevenThumbActive { 
left: 231px; 
background-position: -231px -27px; 
} 

#thumbnailMenu #tomsThumb { 
left: 260px; 
background-position: -260px 0; 
} 

#thumbnailMenu #tomsThumbActive { 
left: 260px; 
background-position: -260px -27px; 
} 

#thumbnailMenu #deloittePropThumb { 
left: 289px; 
background-position: -289px 0; 
} 

#thumbnailMenu #deloittePropThumbActive { 
left: 289px; 
background-position: -289px -27px; 
} 

#thumbnailMenu #deloitteInfoThumb { 
left: 318px; 
background-position: -318px 0; 
} 

#thumbnailMenu #deloitteInfoThumbActive { 
left: 318px; 
background-position: -318px -27px; 
} 

#thumbnailMenu #turnThumb { 
left: 347px; 
background-position: -347px 0; 
} 

#thumbnailMenu #turnThumbActive { 
left: 347px; 
background-position: -347px -27px; 
} 

#thumbnailMenu #oedThumb { 
left: 376px; 
background-position: -376px 0; 
} 

#thumbnailMenu #oedThumbActive { 
left: 376px; 
background-position: -376px -27px; 
} 

#thumbnailMenu #networkThumb { 
left: 405px; 
background-position: -405px 0; 
} 

#thumbnailMenu #networkThumbActive { 
left: 405px; 
background-position: -405px -27px; 
} 


#thumbnailMenu #smsThumb a:hover { 
background: url(images/thumbnails.jpg) 0px -27px no-repeat; 
} 

#thumbnailMenu #m2Thumb a:hover { 
background: url(images/thumbnails.jpg) -28px -27px no-repeat; 
} 

#thumbnailMenu #calvinInviteThumb a:hover { 
background: url(images/thumbnails.jpg) -57px -27px no-repeat; 
} 

#thumbnailMenu #calvinMerchThumb a:hover { 
background: url(images/thumbnails.jpg) -86px -27px no-repeat; 
} 

#thumbnailMenu #vantaaThumb a:hover { 
background: url(images/thumbnails.jpg) -115px -27px no-repeat; 
} 

#thumbnailMenu #nurminenThumb a:hover { 
background: url(images/thumbnails.jpg) -144px -27px no-repeat; 
} 

#thumbnailMenu #corbThumb a:hover { 
background: url(images/thumbnails.jpg) -173px -27px no-repeat; 
} 

#thumbnailMenu #bpgThumb a:hover { 
background: url(images/thumbnails.jpg) -202px -27px no-repeat; 
} 

#thumbnailMenu #nineElevenThumb a:hover { 
background: url(images/thumbnails.jpg) -231px -27px no-repeat; 
} 

#thumbnailMenu #tomsThumb a:hover { 
background: url(images/thumbnails.jpg) -260px -27px no-repeat; 
} 

#thumbnailMenu #deloittePropThumb a:hover { 
background: url(images/thumbnails.jpg) -289px -27px no-repeat; 
} 

#thumbnailMenu #deloitteInfoThumb a:hover { 
background: url(images/thumbnails.jpg) -318px -27px no-repeat; 
} 

#thumbnailMenu #turnThumb a:hover { 
background: url(images/thumbnails.jpg) -347px -27px no-repeat; 
} 

#thumbnailMenu #oedThumb a:hover { 
background: url(images/thumbnails.jpg) -376px -27px no-repeat; 
} 

#thumbnailMenu #networkThumb a:hover { 
background: url(images/thumbnails.jpg) -405px -27px no-repeat; 
} 

您可以在http://www.evaneesemanndesign.com查看實際網站

目前我一直在使用的z-index以及把不同的圖像到背景過渡期間試過......這些選項都無法正常工作。我知道IE瀏覽器在滾動問題上存在問題，但我不確定要遵循什麼解決方案......尤其是因爲它在網站的某些部分有效。

任何幫助將不勝感激。

謝謝。

麥迪遜

Answer 1

我在IE兼容模式（應該也至少相當於IE7）嘗試，嘗試用以下取代#thumbnailMenu li和#portfolioAboutContactMenu li：

#thumbnailMenu li { 
    /* Difference being that the width and display properties were removed */ 
    position: absolute; 
    list-style: none; 
    background: url(images/thumbnails.jpg) no-repeat 0 0; 
    height: 27px; 
    top: 0; 
} 

#portfolioAboutContactMenu li { 
    /* Difference being that the width and display properties were removed */ 
    width: 194px; 
    height: 18px; 
    top: 0px; 
    background: url(images/portfolioAboutContact.gif) 0 0 no-repeat; 
    list-style: none; 
} 

至少它的工作原理是這樣（因爲我沒有「真正」的IE6/7環境來測試它）。讓我知道結果如何。我敢肯定你陷入僵局的老Internet Explorer中的bug :)

Answer 2

剛剛從標籤HTML，身體和#pagewidth刪除text-align屬性：

html, body{ 
margin:0; 
padding:0; 
} 

#pagewidth{ 
width:800px; 
margin-left:auto; 
margin-right:auto; 
} 

或者添加一個「文本對齊： 剩下;」到標籤#portfolioAboutContactMenu，#thumbnailMenu。

然而，對於一個更好的搜索引擎的定位，我建議你使用一些文本替換解決方案，因爲抓取工具會掃描網頁的源，而在你有幾個文本內容;這也改善了您的網頁的可訪問性。此外，我建議將「alt」屬性添加到「img」標籤！