Question

所以我对IE有一个非常烦人的问题，我似乎无法弄明白。前提很简单我有一个图像，并在悬停时显示一些半透明背景的文本。它在Firefox，Safari和Chrome中运行良好。但是，在IE中，它不是将div堆叠在一起而不是遵循float属性。这是CSS：

.new-product-link {
    background:#E0E0E0;
    height:342px;
}
.new-product-link .new-container {
    float:left;
    width:94px;
    height:94px;
    padding:3px;
    margin:6px 5px;
    position:relative;
    left:2px;
    border:1px solid #BBB;
}
.new-product-link .new-container:hover {
    border:1px solid #777;
    cursor:pointer;
}
.newProduct {
    float:left;
    height:100px;
    width:100px;
    position:relative;
    bottom:97px;
    right:3px;
    background:#777;
    opacity:0.75;
    display:none;
}
.newProduct span {
    position:relative;
    top:20px;
    color:#F0F0F0;
    font:bold 14px Arial;
}
.newProduct span span {
    font:11px Arial;
}

JS：

<script>
$(".new-container").hover(
    function () {$(this).children("div").fadeIn(350);},
    function () {$(this).children("div").fadeOut(100);}
);
</script>

HTML：

<div align="center" class="new-container">
    <img src="http://www.example.com/image.png">
    <div class="newProduct">
        <span class="newProduct-item">Item Number<br />
            <span>Click for Additional<br />Information</span>
        </span>
    </div>
</div>

有关工作示例，请参阅HERE。一切看起来都非常简单，并且在其他主流浏览器中运行良好，希望有人可以看到我的方式错误。感谢您的帮助和建议。

Answer 1

如果没有doctype，你永远不会让IE尝试像其他更现代的浏览器一样。如果您没有使用任何较旧的，已弃用的标记，我建议您使用此标记：
<!DOCTYPE html>

使用Hover在IE中出现奇怪的CSS问题

1 个答案: