doctype html中断布局

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

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; 

}

通知li.menu:hover以上CSS。它不适用于IE8。所以我加了<!DOCTYPE html>，建议在this thread。

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

enter image description here

我会希望得到的结果，将在IE8的工作，然后再会喜欢学习解决办法，将工作始终在重大（可能不在IE6中）浏览器。并会很高兴坚持CSS和HTML（无脚本）。最重要的是想知道这里完全错误的是什么。

来源

2012-12-19 Mahesha999

尝试增加'＃ navmenus，#content {margin：0 auto; }' – Andy

尝试页边距：0自动;而不是中心 –

从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; 
}

来源

2012-12-19 11:00:48

它没有工作 – Mahesha999

以及它的工作，但一些更多的布局被doctype遮蔽，将工作，谢谢反正 – Mahesha999

我会更新内容区域中的CSS来此：

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

使用保证金将围绕这个元素，而不是试图用父元素的文本对齐。

来源

2012-12-19 11:00:37 Fenton

doctype html中断布局

回答

相关问题