覆盖 div 在 Chrome 和 FF 中有效，但在 IE 中无效？答案

【问题标题】：Overlaying div works in Chrome and FF but not IE?覆盖 div 在 Chrome 和 FF 中有效，但在 IE 中无效？
【发布时间】：2014-01-27 02:00:26
【问题描述】：

我无法在图像上叠加两个 div。我的目标是制作一个简单的灯箱，当用户将鼠标移到灯箱的右侧或左侧时，我希望鼠标成为指针并显示左右箭头。这是我的代码：

HTML：

<div class="container">
    <img src="http://dummyimage.com/600x600/000/fff.jpg">
    <div class="left">
    </div>
    <div class="right">
    </div>
</div>

CSS：

.container {
        position: fixed;
        top: 50%;
        left: 50%;
        width: 600px;
        height: 600px;
        margin-top: -300px;
        margin-left: -300px;
        background-color: lightgrey;
        z-index: 10000;
}

.left {
        position: absolute;
        top: 0;
        left: 0;
        width: 100px;
        height: 100%;
        cursor: pointer;
        z-index: 10500;
}

.left:hover {
        background: rgba(248, 248, 248, 0) left center no-repeat url("http://imageshack.com/a/img823/9885/bsux.png");
}

.right {
        position: absolute;
        top: 0;
        right: 0;
        width: 100px;
        height: 100%;
        cursor: pointer;
        z-index: 10500;
}

.right:hover {
        background: rgba(248, 248, 248, 0) right center no-repeat url("http://imageshack.com/a/img845/5814/75r3.png");
}

JSFIDDLE：Fiddle

如您所见，它在 Chrome 和 FF 中运行良好，但由于某种原因我无法在 IE 中运行。请注意，如果您删除图像，它可以工作，但它不适用于那里的图像。

有什么问题，我该如何解决？

【问题讨论】：

试试这种格式background: rgba(248, 248, 248, 0) url("http://imageshack.com/a/img823/9885/bsux.png") left center no-repeat; IE也不能用？
@mdesdev 不幸的是，这并没有什么不同。我正在运行 IE 10
Ok...第一次从.container 中删除z-index 并添加.container img { position: relative; z-index: 100; } 第二次将border: 1px solid transparent; 添加到.left 和.right 和第三次而不是rgba(248,248,248,0) 你可以使用@ 987654331@。这应该可以解决一些问题，它在 IE 中仍然不是很好但可以工作。

标签： css image html position

【解决方案1】：

我认为这是某种古老的 IE 错误，但如果您没有为 .left 元素设置背景颜色，它将无法识别 .left:hover 条件。尝试为.left 添加透明的默认颜色。

background-color: rgba(248, 248, 248, 0);

编辑：工作小提琴，http://jsfiddle.net/fEy9a/9/

【讨论】：