3

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

}

注意li.menu:hover上面的 CSS。它在 IE8 中不起作用。所以我按照这个线程<!DOCTYPE html>的建议添加了。

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

在此处输入图像描述

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

4

2 回答 2

3

text-align:center;从你想要在页面居中的块元素中删除body并使用..margin:auto

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

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

#content
{
    width:900px;
    background-color:#ffffff;
    height:1300px;
    margin:0 auto;
}
于 2012-12-19T11:00:48.027 回答
0

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

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

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

于 2012-12-19T11:00:37.557 回答