伪类：hover在IE7中不起作用
时间：2020-03-06 14:49:17 来源:igfitidea点击:
我有一个简单的代码：
<div class="div1">
<div class="div2">Foo</div>
<div class="div3">
<div class="div4">
<div class="div5">
Bar
</div>
</div>
</div>
</div>
和这个CSS：
.div1{
position: relative;
}
.div1 .div3 {
position: absolute;
top: 30px;
left: 0px;
width: 250px;
display: none;
}
.div1:hover .div3 {
display: block;
}
.div2{
width: 200px;
height: 30px;
background: red;
}
.div4 {
background-color: green;
color: #000;
}
.div5 {}
问题是：当我将光标从.div2移到.div3(.div3应该是可见的，因为它是.div1的子元素)时，悬停被禁用。我正在IE7中对其进行测试，在FF中它可以正常工作。我究竟做错了什么？我还意识到，当我删除.div5标签时，它会起作用。有任何想法吗？
解决方案
我发现此解决方案效果更好，并且更干净：
<style type="text/css">
* {
color: #fff;
}
.wrapper {
}
.trigger {
background: #223;
}
.appear {
background: #334;
display: none;
}
.trigger:hover .appear {
display: block;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="trigger">
<p>This is the trigger for the hover element.</p>
<div class="appear">
<p>I'm <strong>alive!</strong></p>
</div>
</div>
</div>
</body>
pastebin。
IE7不允许我们将：hover伪类应用于非锚元素，除非我们明确指定doctype。只需在页面上添加一个doctype声明，它就可以正常工作。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
可以在此博客文章中找到有关IE7 /怪癖模式的更多信息。
可能是双重保证金问题吗？
我做了一个显示：如果发生li，它会内联
http://www.positioniseverything.net/explorer/doubled-margin.html
