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、body 和 #pagewidth 中删除 text-align 属性：

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

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

或者添加“text-align: left;”到标签#portfolioAboutContactMenu、#thumbnailMenu。

不过，为了更好的搜索引擎定位，我建议你使用一些文字替换的方案，因为爬虫会扫描网页的来源，而你的网页中文字内容很少；这也提高了网页的可访问性。此外，我建议将“alt”属性添加到“img”标签中！