internet-explorer - float divのトップマージンを無視するIE8

Question

IE8 を除くすべてのブラウザーは、サイトのナビゲーション メニュー マージンの CSS を適切に読み取っています。IE8 は、nav css の 2 つの全幅 div (ロゴ div とメニュー div) の間に配置したマージンまたはパディングを無視します。元のファイルは、私が編集したシンプルなレスポンシブ テンプレートからのものです。

背景画像に干渉しないように、nav-menu div を十分に下に配置する必要があります。誰か提案はありますか？

Answer 1

IE の目的でのみ、IE が検出されたときに実行時に高さを設定する "Table or Div" タグを追加することができます (jquery を考えてください)。

Answer 2

この構造と css アプローチに慣れている場合:

<div id="header-inner" class="sixteen columns over">
  <div id="masthead" class="sixteen columns alpha"></div>
  <div class="clear"></div>
  <nav class="sixteen columns omega" id="main-nav" name="main-nav"></nav>
</div>

#mastheadと の両方を浮動させ、絶対に下部に#main-nav配置する場合は、明示的な高さ#main-navを割り当てる必要があります 。#header-inner他のブラウザは高さを 225px で計算しているので、そこから始めます。

#header-inner{
height: 225px; 
}