2

目前我正在使用 ie9 来呈现我的网页。在使用 'margin: 0 auto' css 属性来满足我的一项要求时，它不起作用。所以我浏览了很多并找到了原因，我没有指定 doctype 以关闭 quirks 模式。所以我添加了链接中指定的文档类型。结果，我的网页似乎没有按原样加载。它省略了一些与之绑定的 css 和脚本 [jquery]。

当我尝试通过删除文档类型来加载网页时，它会正常显示所有内容，但 margin: 0 auto 似乎不起作用..

顺便说一句，这个链接指出 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;
}

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

4

3 回答 3

0

您可能包含了错误的文档类型。

现代标准的文档类型很简单，<!doctype html>可以在页面的开头使用。

例如：

<!doctype html>
<html>
    <head></head>
    <body></body>
</html>
于 2013-01-01T10:18:29.153 回答
0

我在您的 CSS 中看不到任何具有该规则 ( margin: 0 auto;) 的内容，但通常auto仅当元素具有定义的宽度时才适用于边距。

此外，您确实应该指定一个字符集。建议在大多数情况下使用 UTF-8：

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

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

于 2013-01-01T11:19:18.700 回答
0

找到解决方案，

在我们为其父元素分配任何固定高度之前，相对于其父元素的子元素不会获得任何高度。因此，在我的情况下，DivMenu 是相对于 body 和 html 标签，但我没有为它指定任何高度。在 Quirks 模式下，渲染引擎只是离开上述规则并渲染页面，但在其他<!DOCTYPE html>指定 doctypes (Ex: ) 的模式下，它会考虑该规则。那就是问题所在。这就是我的页面崩溃的原因。

现场版：之前-之后

CSS：

html,body          //Html tag added
{
height:100%;       //Added this
width:100%;        //Added this
margin:0;
padding:0;
border: 0;
overflow:hidden;
}
于 2013-01-03T17:39:32.697 回答