doctype html中断布局_Html_Internet Explorer_Css

doctype html中断布局

html internet-explorer css

doctype html中断布局,html,internet-explorer,css,Html,Internet Explorer,Css,我正在尝试复制html5doctor.com的布局。我在这里安装了IE8。我能够产生以下输出： HTML <html> <head> <link type="text/css" rel="stylesheet" href="style.css" /> </head> <body> <div id="header"> </div> <div id="nav">

我正在尝试复制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>

注意

li。菜单：在上面的CSS中悬停。它在IE8中不起作用。因此，我按照在上的建议添加了

它使悬停生效，但现在它破坏了布局，如下所示：

我希望得到的结果，将工作在IE8的第一，然后将希望学习周围的工作，将工作在主要（可能不是在IE6）浏览器一致。并且很乐意坚持使用CSS和HTML（无脚本）。最重要的是，我想知道这里到底出了什么问题。
我会将内容区域的CSS更新为：
#content
{
    width:900px;
    background-color:#ffffff;
    height:1300px;
    margin: 0 auto;
}

使用边距将使此元素居中，而不是尝试在父元素上使用文本对齐。
删除文本对齐：居中正文
中选择code>，并使用页边距：自动
，用于要在页面中居中的块元素
需要它的元素是#导航菜单
和#内容
，因此
#navmenus
{
    background-color:#14B3F7;
    width:900px;
    margin:0 auto;   
}

#content
{
    width:900px;
    background-color:#ffffff;
    height:1300px;
    margin:0 auto;
}

尝试添加#导航菜单，#内容{margin:0 auto；}尝试margin:0 auto；虽然没有centerwell，但doctype掩盖了更多的布局，但还是可以，谢谢
#navmenus
{
    background-color:#14B3F7;
    width:900px;
    margin:0 auto;   
}

#content
{
    width:900px;
    background-color:#ffffff;
    height:1300px;
    margin:0 auto;
}