无法让悬停导航在 IE8/9 中工作，在 FF/Chrome 中工作答案

【问题标题】：Cannot get hover navigation working in IE8/9, works in FF/Chrome无法让悬停导航在 IE8/9 中工作，在 FF/Chrome 中工作
【发布时间】：2011-07-02 13:22:07
【问题描述】：

我正在努力让我的摄影作品集网站在所有主要浏览器（IE8、FF、Chrome）上都能正常运行，到目前为止，它在后两种浏览器中运行良好，但一些导航元素并没有出现在 IE8 或 9 中，尽管我所有的努力。

你可以在这里看到我在说什么，例如：http://element17.com/index.php?level=picture&id=88

图像的最左侧和最右侧 100 像素，当用鼠标滚动时，应显示箭头，使您可以分别导航到相册中的上一张和下一张图像。在 Firefox 和 Chrome 中，它们会按预期显示和运行。但是，在 IE8/9 中，它们不会显示。所有其他悬停信息均正确显示。

 <?php plogger_get_header(); ?>

 <div id="big-picture-container">

 <?php if (plogger_has_pictures()) : while(plogger_has_pictures()) :

 plogger_load_picture();
    $picture_caption = trim(plogger_get_picture_caption());
    $detail_link = plogger_get_detail_link();
    $prev_link = plogger_get_prev_picture_link();
    $next_link = plogger_get_next_picture_link();

    if ($picture_caption != '' || !isset($picture_caption)); ?>

    <div class="picture-holder" style="width:<?php echo get_image_width(plogger_get_picture_id()); ?>;height:<?php echo get_image_height(plogger_get_picture_id()); ?>;">

    <div class="hovering" style="position: absolute;margin: 0px;padding: 0px;top: 0px;left: 0px;z-index: 1000;width:<?php echo get_image_width(plogger_get_picture_id()); ?>;height:<?php echo get_image_height(plogger_get_picture_id()); ?>;">

    <div class="exif-data">

    <?php $wallpath = "";
    $wallpath .= "plog-content/images/wallpaper/";
    $wallpath .= $picture_caption;
    $wallpath .= "Wide.jpg";

    if (file_exists($wallpath)) {
    echo "<span style='position:absolute; margin-top:1px;'><a href='plog-content/images/wallpaper/"; echo $picture_caption; echo "Wide.jpg'><img src='plog-content/images/wide.png' /></a></span><span style='position:absolute; margin-left:20px;'><a href='plog-content/images/wallpaper/"; echo $picture_caption; echo "Full.jpg' style='display:inline;'><img src='plog-content/images/full.png' /></a></span>";
    }
    $wallpath = ""; ?>

            <h2><?php echo $picture_caption; ?></h2>
            <?php echo plogger_get_picture_date(); ?><br />
            <div class="exif"><?php echo generate_exif_table(plogger_get_picture_id()); ?></div>
        </div>

        <?php echo $prev_link; ?>
    <?php echo $next_link; ?><img class="photos-large" src="<?php echo plogger_get_picture_thumb(THUMB_LARGE); ?>" alt="<?php echo $picture_caption; ?>" /></div>

    </div>
    </div>
    </div>

    <?php endwhile; else : ?>

<p>No such image</p>

<?php endif; plogger_get_footer(); ?>

对于凌乱的内联样式等，我深表歉意……我仍在尝试清理其中的一些内容，但我认为这些内容都无关紧要。您也可以在此处查看样式表：http://www.element17.com/plog-content/themes/diffuser/gallery.css;我也为此道歉。 :\

谁能明白为什么会发生这种情况？我玩过 z 索引、标签顺序以及我能想到的所有东西，但我无法想象为什么会发生这种情况。

谢谢大家！

编辑：

这是最终呈现的 HTML，根据请求：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 <html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
 <head> 
 <title>City (Constructs, 2010) - Element17 Photography</title> 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
<meta http-equiv="imagetoolbar" content="false" /> 
<meta name="keywords" content="City" /> 
<meta name="description" content="" /> 
<link rel="stylesheet" type="text/css" href="http://element17.com/plog-content/themes/diffuser/gallery.css" /> 
<script type="text/javascript" src="http://element17.com/plog-content/themes/diffuser/dynamics.js"></script> 

 </head> 

 <body> 

 <div id="centering">

 <div id="wrapper">

 <div id="header"><table width="100%"><tr><td><a href="index.php"><img src="./plog-content/themes/diffuser/images/logo.png" alt="Element17 Photography" /></a></td><td align="right"><div id="breadcrumb-links"><a href="http://element17.com/index.php">Home</a> &raquo; <a accesskey="/" href="http://element17.com/index.php?level=collection&amp;id=5">Constructs</a> &raquo; <a accesskey="/" href="http://element17.com/index.php?level=album&amp;id=12">2010</a> &raquo; <span id="image_name"><strong>City</strong></span></div></td></tr></table></div>

 <div id="main-container">
 <div id="big-picture-container">


    <div class="picture-holder" style="width:631px;height:950px;">

    <div class="hovering" style="position: absolute;margin: 0px;padding: 0px;top: 0px;left: 0px;z-index: 1000;width:631px;height:950px;">

    <div class="exif-data">


            <h2>City</h2>
            March 20, 2010<br />
            <div class="exif">                      Nikon D300, Tamron SP AF 17-50mm f/2.8 XR DiII VC @ 17 mm, f/9, 1/320 sec, ISO 200
 </div>
        </div>

        <a id="prev-button" href="http://element17.com/index.php?level=picture&amp;id=87">&nbsp;</a>        <a id="next-button" href="http://element17.com/index.php?level=picture&amp;id=96">&nbsp;</a><img class="photos-large" src="http://element17.com/plog-content/images/constructs/2010/20100320-dsc_5688.jpg" alt="City" /></div>

    </div>
    </div>
    </div>

    <div id="footer">

<div id="link-back">The photography and design of element17.com is copyright <b>&copy; 2007-2011</b> by <b><a href="mailto:steve@element17.com">Steve Gaucher</a></b> and may not be reproduced/republished in any manner without prior consent.</div></div>

【问题讨论】：

你应该向我们展示渲染的代码，作为浏览器在 Firebug/View 源代码中的输出。
@Kyle 添加了渲染代码。
谢谢！我想帮你，但 IE 没用！
当您将位置更改为固定时，它会转移（当然）但随后会激活管理器状态。我用 left: 70px 把它推过去，似乎有什么东西挡住了它。你能在 DOM 中进一步添加它吗？如在图片之后？
@Kyle Done，但我很确定我以前在那里没有任何变化......

标签： html css navigation hover

【解决方案1】：

你目前有这个作为你的 css：

#prev-button:hover

IE 无法识别 :hover 或 ID/Classes 上的其他伪类。 更改为：

a:hover#prev-button

你的#next-button也是如此。

此外，您在链接的正常状态下指定了filter，但未在 :hover 状态下指定。总而言之，这就是您所需要的：

a:hover#prev-button, a:hover#next-button { 
   color:#aaa; opacity:.75; filter:alpha(opacity=75);
}

这应该解决你的IE问题:)

【讨论】：