我正在尝试复制html5doctor.com的布局。我在这里安装了IE8。
我能够生成以下输出:
HTML
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<div id="header">
</div>
<div id="nav">
<div id="navmenus">
<ul id="navmenulist">
<li class="menu" id="id1">
<a href="#">Home</a>
<li class="menu">
<a href="#">Products</a>
<li class="menu">
<a href="#">About Us</a>
</ul>
</div>
</div>
<div id="content" >
<div id="article"></div>
<div id="sidebar"></div>
</div>
<div id="footer"></div>
</body>
</html>
CSS
/*I have added CSS Reset from http://meyerweb.com/eric/tools/css/reset/
Just deleted it for simplicity
*/
body
{
margin:0px;
padding:0px;
background-color:#E8E8E8;
text-align:center;
}
#header
{
background-color:#1F7ADB;
width:100%;
height:150px;
}
#nav
{
background-color:#1F7ADB;
width:100%;
text-align:center;
}
#navmenus
{
background-color:#14B3F7;
width:900px;
text-align:left;
}
li.menu
{
list-style:none;
display:inline;
height:35px;
padding:12px;
}
li.menu:hover
{
background-color:yellow;
}
li.menu a
{
text-decoration:none;
font-family:Arial;
font-size:18px;
}
#content
{
width:900px;
background-color:#ffffff;
height:1300px;
}
注意上述CSS中的
li.menu:hover
在IE8中不起作用。因此,我按照此线程的建议添加了<!DOCTYPE html>
。这使悬停效果正常工作,但现在布局被破坏了,如下所示:
![enter image description here](https://istack.dev59.com/Yruz1.webp)
#navmenus,#content { margin: 0 auto; }
。 - Andy