在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”标签！