インターネットエクスプローラで私の基本CSSレイアウトが正しく表示されないのはなぜですか？

私は純粋なCSSレイアウトを試しています。すぐに私は立ち往生してしまいました。しかし、IEで私は、次の取得インターネットエクスプローラで私の基本CSSレイアウトが正しく表示されないのはなぜですか？

：

私はChromeでこれを表示すると、私は期待していたレンダリングを取得

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html lang="en"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
     <title>Layout</title> 
     <link type="text/css" href="site.css" rel="stylesheet" > 
    </head> 
    <body> 
     <div id="header"> 
      <a href="#" id="logo">My Site</a> 

      <div id="search-area"> 
       <form> 
        <input type="text" id="search-box" /> 
        <input type="submit" value="Search" /> 
       </form> 
      </div> 
     </div> 

     <div id="sidebar"> 
      Account Name <br> 
      <a href="#">Edit My Account</a> 

     </div> 
    </body> 
</html> 

#header { 
    background-color: #151B54; 
    height: 30px; 
    width: 100%; 
} 

#logo { 
    position: relative; 
    left: 10px; 
    color: white; 
    font-size: x-large; 
    font-weight: bold; 
    text-decoration: none; 
    float: left; 
    margin-top: 3px; 
} 

#search-area { 
    position: absolute; 
    left: 200px; 
    margin-top: 3px; 
} 

#sidebar { 
    float: left; 
    width: 100px; 
    border-right: double; 
}

：私は、次のHTMLとCSSを持っています

サイドバーの左側に大量の空白があることに注意してください。 IEでなぜそれが表示されていますか？

出典

2011-07-31 KallDrexx

悪い、更新済み – KallDrexx

どのバージョンのIEが影響を受けますか？ – Knu

は、ほとんどのブラウザで常にCSSリセットを使用しています。 – Ehtesham

Safariで同じ問題が発生します。同じ理由で浮動小数点数を#headerにクリアしていないため、#headerは浮動小数点のすべての子を格納するのに十分な高さではありません。

ヘッダーの高さを31ピクセルに増やす場合は、希望のレイアウトを取得する必要があります（ただし、そうでない可能性があります）。より良いアプローチは、あなたが#headerの子供たちのすべてが完全に#headerに含まれているし、それが次の作品のレイアウトに干渉するからそれらを停止しますようになります明確な修正、などoverflow: hiddenを追加です：

#header { 
    background-color: #151B54; 
    height: 30px; 
    width: 100%; 
    overflow: hidden; 
}

ライブ例： http://jsfiddle.net/ambiguous/EUmyN/

フローティング要素の経験則では、コンテナのoverflow: hiddenか、必要であれば、コンテナの下部に明示的に<div style="clear: both;"></div>と表示されます。

また、私たちはここにいますが、<div>のようなブロック要素にはwidth: 100%はめったに必要ありません。あなたがそれを置いているか浮いているのであれば、そのようなものが必要かもしれませんが、普通のものは必要ありません。<div>;ブロック要素はデフォルトで全幅です。

出典

2011-07-31 03:52:26

オーバーフロー：隠されたトリック。良い説明をありがとう:) – KallDrexx

-1

オンラインキャッシュをクリアしてみてください。多くの場合、cssファイルはキャッシュされ、このタイプの動作を引き起こす古いバージョンを使用します。

問題はありませんが、スタイル上の予期しない結果のトラブルシューティングを行うときにまず実行する必要があります。

出典

2011-07-31 03:32:53

Nopeはキャッシュの問題ではないようです。 – KallDrexx

インターネットエクスプローラで私の基本CSSレイアウトが正しく表示されないのはなぜですか？

答えて

関連する問題