jquery - Internet Explorer 鼠标输入可能的错误

Question

我目前对这个特定的 HTML/CSS 问题不知所措。我有一个旋转木马，每侧都有两个绝对定位的 li 元素以允许导航(上一张图片/和下一张图片)。这两个 li 元素在除所有版本的 IE (7-9) 之外的所有浏览器中都正确显示，但是，在 IE 中，li 元素显示在主要元素后面，即使我给它们一个 z-index。

我可能遗漏了一些东西，因为已经是一天结束的时候了，我很累，但我似乎无法弄清楚为什么会这样。

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

我怀疑这可能是 IE 的一个错误，因为我很少无法调试 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>

CSS:

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;}

编辑

我是想说“li”而不是“div”

更新

看来问题可能与 HTML/CSS 无关，因为我已设法确定该元素显示在页面的前面。问题似乎出现在 jQuery 上。当我将鼠标移到该元素上时，“mouseenter”功能似乎没有触发。这是 jQuery 中的已知错误吗？

解决方案

我已经弄清楚问题是什么了。这与我提到的元素的“hasLayout”有关。因为它们有透明背景，所以当我将鼠标放在它们上面时，jQuery 事件不会被捕获。解决办法是用图片设置透明背景。

请引用: Mouseenter only fired on border of transparent div in IE9

感谢您的所有建议，很抱歉浪费您的时间。

Answer 1

我认为这是由于您的“文本缩进”在 anchor 上设置为负数造成的。我相信它与在 IE 中控制其自身布局的 anchor 元素有关，而不是在其边缘停止文本。以下是对“hasLayout”属性及其在 IE 中可能导致的一些问题的简要说明。我删除了“文本缩进”，上一个/下一个链接在我在轮播中设置的任何图像上正常显示。