Question

我正在尝试复制html5doctor.com的布局。我在这里安装了IE8。我能够产生以下输出：

enter image description here

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>。

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

enter image description here

我希望得到的结果首先适用于IE8，然后希望学习可以在主要（可能不在IE6中）浏览器中一致地工作。并且很乐意坚持使用CSS和HTML（没有脚本）。最重要的是，我们希望了解这里的错误。

Answer 1

从text-align:center;中移除body，并使用margin:auto作为您希望在页面中居中的块元素。

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

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

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

Answer 2

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

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

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

doctype html打破布局

2 个答案: