2

現在、私は ie9 を使用して Web ページをレンダリングしています。私の要件の 1 つに 'margin: 0 auto' css プロパティを使用している間、それは機能しませんでした。だから私は多くのサーフィンをして理由を見つけました。そのため、リンクで指定された doctype を追加しました。その結果、私のWebページはそのままロードされていないようです。それにバインドされていたいくつかのcssとスクリプト[jquery]を省略しています。

Doctypeを削除してWebページを読み込もうとすると、すべてのコンテンツが正常に表示されますが、margin: 0 autoが機能していないようです..

ちなみに、このリンクには、Quirks モードのオフとオンに対する 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>と、ページが正しく表示されません。
しかし、それがなければ、レンダリングに問題はありません。

4

3 に答える 3

0

margin: 0 auto;そのルール（ ）を持つCSSには何も表示されませんが、原則として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>doctype (例: ) が指定された他のモードでは、そのルールを考慮しました。それが問題だ。それが私のページが折りたたまれた理由です。

ライブバージョン:ビフォア-アフター

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 に答える
0

間違った doctype を含めた可能性があります。

<!doctype html>最新の標準の doctypeは、ページの冒頭で使用するのと同じくらい簡単です。

例えば：

<!doctype html>
<html>
    <head></head>
    <body></body>
</html>
于 2013-01-01T10:18:29.153 に答える