Question

目前我使用ie9来渲染我的网页。虽然我的一个要求使用'margin：0 auto'css属性，但它没有用。所以我经常浏览并发现reason，我没有指定doctype以关闭怪癖模式。所以我添加了链接中指定的doctype。结果我的网页似乎没有按原样加载。它省略了一些用它绑定的css和脚本[jquery]。

当我尝试通过删除doctype来加载网页时，它正常显示所有内容，但是margin：0 auto似乎无法正常工作..

顺便说一句，这个link声明jquery会对关闭和打开的怪癖模式做出不同的响应。所以我也尝试更改我的脚本。但结果相同。

在这个阶段我很困惑。任何线索。？

修改

HTML：

<html>
<head>
<title>Rajaprabhu</title>
<link rel="stylesheet" type="text/css" href="css/PrabhuCss.css">
</head>

<body>

 <div id="DivMenu">
   <div id="DivLogo">R</div>
 </div>

 <div id="DivMain">
   <div id="DivHeader">
   </div>
   <div id="DivContent">
     <div id="DivSlider">
       <div id="DivHome">        
       </div>
       <div id="DivSkills">
       </div>
     </div>
   </div>
   <div id="DivFooter">
   </div>
 </div>

</body>

</html>

CSS：[PrabhuCss.css]

#DivMain
{
position: relative;
width:100%;
height:100%;
z-index:1;
}

#DivFooter
{
position:absolute;
width:100%;
height:5%;
bottom:0%;
left:0%;
background-image: url('../Images/ImgHeaderFooter.jpg');
z-index:5;
border-top: 2px solid #2F2E2E;   
}

#DivHeader
{
position:absolute;
width:100%;
height:10%;
top:0%;
left:0%;
background-image: url('../Images/ImgHeaderFooter.jpg');
z-index:6;
border-bottom: 2px solid #2F2E2E;
}

#DivMenu
{
position:absolute;
border-radius: 999px;
background: #ccc;
border: 2px solid #2F2E2E;
cursor: pointer;
z-index:7;
text-align:center;
width: 4%;
height: 8%;
left: 48%;
top: 6%;
}

#DivLogo
{
font-family: 'Wendy One', sans-serif;
font-size:35px;
position:relative;
top:50%;
margin-top: -18px;
}

#DivContent
{
position:relative;
width:100%;
height:85.02%;
top:10%;
left:0%;
z-index:2;
overflow: hidden;
}

#DivSlider
{
position:absolute;
width:100%;
height:100%;
z-index:3;
}

#DivHome
{
width:100%;
height:50%;
z-index:4;
background-image: url('../Images/ImgBackground.jpg')
}

#DivSkills
{
width:100%;
height:50%;
z-index:4;
background-image: url('../Images/ImgBackground.jpg')
}

body
{
margin:0;
padding:0;
border: 0;
overflow:hidden;
}

如果我在我的Html顶部使用<!doctype html>，页面显示不正确但是没有任何渲染问题。

Answer 1

您可能包含了错误的doctype。

现代标准的doctype就像在页面开头使用<!doctype html>一样简单。

例如：

<!doctype html>
<html>
    <head></head>
    <body></body>
</html>

Answer 2

我没有在CSS中看到任何具有该规则的内容（margin: 0 auto;），但作为规则auto仅适用于元素具有已定义宽度的边距。

另外，你真的应该指定一个字符集。建议大多使用UTF-8：

<!doctype html>
<head>
    <meta charset="utf-8" />
    <!-- everything else... -->

这应该是<head>元素中的第一个元素。

Answer 3

找到解决方案，

相对于其父级的子元素将不会获得任何高度，直到我们为其父级分配任何固定高度。所以，在我的情况下，DivMenu是相对于body和html标签，但我没有为它指定任何高度。在Quirks模式下，渲染引擎刚刚离开了上述规则并呈现了页面，但在指定了doctypes（例如：<!DOCTYPE html>）的其他模式中，它会使该规则失效。那就是问题所在。这就是我的页面崩溃的原因。

实时版：Before - After

CSS：

html,body          //Html tag added
{
height:100%;       //Added this
width:100%;        //Added this
margin:0;
padding:0;
border: 0;
overflow:hidden;
}

关闭怪癖模式会影响网页

3 个答案: