logo标签列表

<!doctype html> 会破坏页面布局

htmlinternet-explorercss
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;

}

注意上述CSS中的li.menu:hover在IE8中不起作用。因此，我按照此线程的建议添加了<!DOCTYPE html>。
这使悬停效果正常工作，但现在布局被破坏了，如下所示： enter image description here 我希望能够先得到在IE8上正常工作的结果，然后学习适用于主要浏览器（可能不包括IE6）并始终可靠的解决方法。我很乐意坚持使用CSS和HTML（无脚本）。最重要的是，我想知道这里出了什么问题。
尝试添加 #navmenus，#content { margin: 0 auto; }。 - Andy
尝试使用margin:0 auto;代替center。 - Vivek Dragon
2个回答
3
从中删除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;
}
虽然它可以工作，但是某些布局被文档类型声明遮挡了，我会继续处理这个问题，无论如何还是谢谢。 - Mahesha999
0
我会将内容区域的CSS更新为以下内容：
#content
{
    width:900px;
    background-color:#ffffff;
    height:1300px;
    margin: 0 auto;
}

使用margin属性可以使该元素居中，而不是尝试在父元素上使用text-align属性。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接