Jquery Internet Explorer鼠标输入可能的错误

我目前对这个特殊的HTML/CSS问题感到困惑。我有一个旋转木马，每侧有两个绝对定位的li元素，用于导航（前一张图片/和下一张图片）。这两个li元素在除IE（7-9）所有版本之外的所有浏览器中都能正确显示，然而，在IE中，即使我给它们一个z索引，li元素也会显示在主元素后面

我可能错过了一些东西，因为这是一天的结束，我很累，但我似乎不明白为什么会这样

让这个问题更加奇怪的是，如果我给li元素一个背景，它们会正确显示！只要我给它们一个背景色，它们就会出现在元素前面

我怀疑这可能是IE的一个bug，因为我很少调试CSS文件失败，但是，正如我所说的，我很累

请忽略不透明度值和显示值，这些值会使用jQuery进行更改。它们完全无关。

HTML:

<header id="carousel">
    <div id="carousel-holder">
        <div id="carousel-canvas" style="width: 2364px; ">
            <figure id="more-business" class="">
                <img>
            </figure>
            <figure id="more-money" class="active">
                <img>
            </figure>
        </div>
    </div>
    <nav>
        <ul id="arrow-nav">
            <li id="carousel-arrow-previous"><a href="#previous" title="Previous" class="sprite">Previous</a></li>
            <li id="carousel-arrow-next"><a href="#next" title="Next" class="sprite">Next</a></li>
        </ul>
    </nav>
</header>

header#carousel {position:relative;width:790px;height:275px;margin:10px auto 0;padding:0;overflow:hidden;}
header#carousel div#carousel-holder {width:788px;height:250px;background:#fff;border:1px solid #999;border-radius:10px;margin:auto;padding:0;overflow:hidden;}
header#carousel div#carousel-canvas {position:static;height:250px;}
header#carousel div#carousel-canvas figure {display:block;position:static;float:left;width:788px;height:250px;border-radius:10px;margin:0;padding:0;overflow:hidden;}
header#carousel div#carousel-canvas figure img {width:788px;height:250px;}

header#carousel nav ul#arrow-nav {position:absolute;top:1px;left:1px;width:788px;height:250px;padding:0;margin:0;list-style-type:none;}
header#carousel nav ul#arrow-nav li {position:absolute;display:block;width:200px;height:250px;z-index:10;}
header#carousel nav ul#arrow-nav li#carousel-arrow-previous {top:0;left:0;}
header#carousel nav ul#arrow-nav li#carousel-arrow-next {top:0;right:0;}
header#carousel nav ul#arrow-nav li a {position:absolute;top:50%;margin-top:-35px;display:none;width:50px;height:70px;overflow:hidden;opacity:0;text-indent:-1000px;}
header#carousel nav ul#arrow-nav li#carousel-arrow-previous a {left:20px;background-position:-95px -156px;}
header#carousel nav ul#arrow-nav li#carousel-arrow-next a {right:20px;background-position:-153px -156px;}

编辑

我的意思是说“莉”而不是“迪夫”

更新

似乎问题不在于HTML/CSS，因为我已经设法确定元素显示在页面的前面。jQuery似乎出现了问题。当我将鼠标移到元素上方时，“mouseenter”功能似乎不会启动。这是jQuery中已知的错误吗

解决方案

我已经知道问题出在哪里了。这与我提到的元素的“hasLayout”有关。因为它们有一个透明的背景，所以当我将鼠标放在它们上面时，不会捕获jQuery事件。解决方法是使用图像设置透明背景

请参阅：

---

谢谢你的建议，很抱歉浪费了你的时间。

你有

显示：无
设置在
标题#旋转导航ul#箭头导航li a
你有
显示：无
设置在
标题#旋转导航ul#箭头导航li a
你在页面中使用的是HTML 5标签。由于涉及到IE7-9，您在IE中使用的是哪种多边形填充。这也可能是原因

IE z索引的堆叠顺序不同于其他浏览器。其z索引顺序基于父元素
 您正在页面中使用HTML5标记。由于涉及到IE7-9，您在IE中使用的是哪种多边形填充。这也可能是原因

IE z索引的堆叠顺序不同于其他浏览器。其z索引顺序基于父元素
 我认为这是由于您的“文本缩进”在锚上设置为负数造成的。我相信这与锚元素在IE中控制自己的布局有关，而不是在边缘停止文本。以下是“”属性的简要说明以及它在IE中可能导致的一些问题。我删除了“文本缩进”，并且在旋转木马中设置的任何图像上，上一个/下一个链接都正常显示。
我认为这是由于您的“文本缩进”在锚上设置为负数所致。我相信这与锚元素在IE中控制自己的布局有关，而不是在边缘停止文本。以下是“”属性的简要说明以及它在IE中可能导致的一些问题。我删除了“文本缩进”，并且在旋转木马中设置的任何图像上，上一个/下一个链接都正常显示。
使用CSS，我发现：

#carousel {
    position: relative;
    width:790px;
    height:275px;
    margin:10px auto 0;
    padding:0;
    overflow:hidden;
}

...

#carousel-holder {
    position: absolute;
    top: 0;
    left: 0;
    width:788px;
    height:250px;
    background:#fff;
    border:1px solid #999;
    border-radius:10px;
    margin:auto;
    padding:0;
    overflow:hidden;
}

...

#carousel nav {
    position: absolute;
    top: 0;
    left: 0;
}
#arrow-nav {
    position: absolute;
    top: 1px;
    left: 1px;
    width:788px;
    height:250px;
    padding:0;
    margin:0;
    list-style-type:none;
}
#arrow-nav li {
    width: 200px;
    height: 100%;
    background: #dff;
}
#carousel-arrow-previous {
    float: left;
}
#carousel-arrow-next {
    float: right;
}

...


#arrow-nav li a {
    margin-top:-35px;
    display:block;
    width:50px;
    height:70px;
    overflow:hidden;
    opacity:1;
    background: #fdf;
    position:absolute;
    top:50%;
    text-indent:-1000px;
    /*z-index: 1000;*/
}
#carousel-arrow-previous a {
    left: 20px;
    background-position:-95px -156px;
}
#carousel-arrow-next a {
    right: 20px;
    background-position:-153px -156px;
} 


在IE9和IE7/8兼容性视图中工作。我所做的是将
#carousel
元素设置为
位置：相对
，然后允许我将
#carousel holder
和
#carousel nav
设置为
位置：绝对
，并继承标记中隐含的自然
z-index
堆叠顺序

注意，我更改了一些其他设置，以便可以看到我在做什么（例如，对于某些元素，
opacity:1
和
background:color
）。我不知道你所做的是否构成了（已知/未知）IE渲染错误，但是清理方法似乎可以解决任何问题

编辑

我不知道。9需要一个：

使用您的CSS，我想到了：

#carousel {
    position: relative;
    width:790px;
    height:275px;
    margin:10px auto 0;
    padding:0;
    overflow:hidden;
}

...

#carousel-holder {
    position: absolute;
    top: 0;
    left: 0;
    width:788px;
    height:250px;
    background:#fff;
    border:1px solid #999;
    border-radius:10px;
    margin:auto;
    padding:0;
    overflow:hidden;
}

...

#carousel nav {
    position: absolute;
    top: 0;
    left: 0;
}
#arrow-nav {
    position: absolute;
    top: 1px;
    left: 1px;
    width:788px;
    height:250px;
    padding:0;
    margin:0;
    list-style-type:none;
}
#arrow-nav li {
    width: 200px;
    height: 100%;
    background: #dff;
}
#carousel-arrow-previous {
    float: left;
}
#carousel-arrow-next {
    float: right;
}

...


#arrow-nav li a {
    margin-top:-35px;
    display:block;
    width:50px;
    height:70px;
    overflow:hidden;
    opacity:1;
    background: #fdf;
    position:absolute;
    top:50%;
    text-indent:-1000px;
    /*z-index: 1000;*/
}
#carousel-arrow-previous a {
    left: 20px;
    background-position:-95px -156px;
}
#carousel-arrow-next a {
    right: 20px;
    background-position:-153px -156px;
} 


在IE9和IE7/8兼容性视图中工作。我所做的是将
#carousel
元素设置为
位置：相对
，然后允许我将
#carousel holder
和
#carousel nav
设置为
位置：绝对
，并继承标记中隐含的自然
z-index
堆叠顺序

注意，我更改了一些其他设置，以便可以看到我在做什么（例如，对于某些元素，
opacity:1
和
background:color
）。我不知道你所做的是否构成了（已知/未知）IE渲染错误，但是清理方法似乎可以解决任何问题

编辑

我不知道。9需要一个：

正如我在问题中所说，请忽略这些值，因为它们不相关。jQueryApologies改变了这一点，你能提供一个链接来显示代码吗？LIs在IE9中为我显示。正如我在问题中所说的，请忽略这些值，因为它们是无关的。jQueryApologies改变了这一点，你能提供一个链接来显示代码吗？对于我来说，LIs在IE9中出现。只需注意：缩小与你的问题相关的CSS（或JS）会让你很难跟上。请缩小代码，以便在发布问题时易于阅读。此外，如果正确使用
id
属性，则此：
标题#carousel nav ul#arrow nav li#carousel arrow previous
可以是
#carousel arrow previous
。你不需要一个完整的选择器来选择一个元素的单个实例