doctype html 打破布局答案

【问题标题】：doctype html breaks layoutdoctype html 打破布局
【发布时间】：2012-12-19 10:55:51
【问题描述】：

我正在尝试复制 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 中不起作用。所以我按照this thread 的建议添加了<!DOCTYPE html>。

它使悬停工作，但现在它破坏了如下布局：

我希望首先获得可以在 IE8 上运行的结果，然后想学习如何在主要（可能不在 IE6 中）浏览器中始终如一地工作。并且很乐意坚持使用 CSS 和 HTML（无脚本）。最重要的是想了解这里到底出了什么问题。

【问题讨论】：

尝试添加#navmenus, #content { margin: 0 auto; }
尝试保证金：0自动；而不是中心

标签： html internet-explorer css

【解决方案1】：

从body 中删除text-align:center; 并将margin:auto 用于您希望在页面中居中的块元素..

需要它的元素是#navmenus和#content，所以

#navmenus
{
    background-color:#14B3F7;
    width:900px;
    margin:0 auto;   
}

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

【讨论】：

效果很好，但是有些布局被 doctype 遮住了，可以解决这个问题，谢谢

【解决方案2】：

我会将内容区域的 CSS 更新为：

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

使用边距将使该元素居中，而不是尝试在父元素上使用 text-align。

【讨论】：