余白：0自動IEで動作していません

私はmargin: 40px auto 0px auto;を使用して画像を含む#logo_alt divを中心にしようとしています。余白：0自動IEで動作していません

問題：：Chromeでは完璧に見えますが、IEではこのimgを含むdivは親コンテナ#header_organizerの左に揃えられています。私はなぜこれが起こっているのか、それがIEでどのように修正できるかを理解することはできません！すべてのヘルプ大歓迎:)

HTML

<div id="header_organizer"> 
    <div id="user_bar">...</div> 
    <div id="user_bar_menu">...</div> 
    <div id="logo_alt">    <!-- <<<<< We are centering this div! --> 
     <img src="logo.png" \> 
    </div> 
</div>

CSS

#header_organizer { 
    width: 100%; 
    height: 180px; 
    background: black url(../images/template/header.png); 
    float: left; 
    position: relative; 
    z-index: 1000; 
} 

#logo_alt { 
    width: 256px; 
    height: 55px; 
    margin: 40px auto 0px auto; 
} 


#user_bar { 
    height: 30px; 
    color: #CCC; 
    font-size: 13px; 
    margin-right: 10px; 
    padding: 0px 5px; 
    float: right; 
    cursor: pointer; 
    position: relative; 
    z-index: 3000; 
} 

#user_bar_menu { 
    width: 200px; 
    height: 165px; 
    background: white; 
    border: 1px solid #BEBEBE; 
    float: right; 
    position: absolute; 
    top: 30px; 
    right: 10px; 
    -moz-box-shadow: -1px 1px 1px rgba(0,0,0,.2); 
    -webkit-box-shadow: 0 2px 4px rgba(0,0,0,.2); 
    box-shadow: 0 2px 4px rgba(0,0,0,.2); 
    display: none; 
    z-index: 1000; 
    border-image: initial; 
}

出典

2012-02-11 Nyxynyx

あなたはDOCTYPE宣言を持っていますか？ – BoltClock

いいえ、私はいません。 HTMLファイルは ''で始まります。私は1つ必要ですか？なぜ？ – Nyxynyx

HTMLファイルが<html xmlns="http://www.w3.org/1999/xhtml">で始めます。

あなたの問題があります。あなたのルート要素にはxmlns属性があるので、ドキュメントにXHTMLのdoctype宣言を与える必要があります。 IEは標準モードで動作し、margin: 0 autoスタイルを正しくレンダリングします。

出典

2012-02-11 17:18:28 BoltClock

この 'doctype'はどうしますか？ '<！DOCTYPE html PUBLIC" - // W3C // DTD XHTML 1.0 Transitional // EN "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> ' – Nyxynyx

はい、そうですしましょう。 – BoltClock

+22

楽しい事実：普遍的な信念に反して、IE6 *は標準モードで 'margin：0 auto'を描画できます。それはできないIE5.xです。 IE6の独自の標準モードがあるので、IEのquirksモードはIE6ではなくIE5.xをエミュレートします。しかし、もちろん、2012年です。誰もこのコメントを読んだり、投票したりすることはありません。セイウチ、プラチナ、ユニコーン。 – BoltClock

最初に、doctypeを追加して、IEが奇妙になるのを防ぐ。

そして、これを試して...

body { 
    width: 100%; 
}

出典

2012-02-11 17:18:44 Sparky

余白：0自動IEで動作していません

答えて

関連する問題