0

我创建了一个投资组合网站，该网站目前在 Safari 和 Firefox 中运行良好，但在 IE 5、6 和 7（不是 8）中存在问题。Portfolio/About/Contact 翻转（纯 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 存在翻转问题，但我不确定要遵循什么解决方案……尤其是因为它确实适用于网站的某些部分。

任何帮助将非常感激。

谢谢你。

麦迪逊

4

2 回答 2

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 错误 :)

于 2009-11-02T07:50:20.090 回答
0

只需从标签 html、body 和 #pagewidth 中删除 text-align 属性：

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

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

或添加“文本对齐：左；” 到标签#portfolioAboutContactMenu、#thumbnailMenu。

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

于 2009-11-02T08:34:55.783 回答