position：Opera/FF/IEではコンテンツを右にプッシュしますが、Webkitブラウザではコンテンツをプッシュしません。

Question

960gを使用して、標準の1列のレイアウトでヘッダーを作成し、次にコンテンツをフッタに移動します。

#navには縦リストがあります。クライアントがjavascriptを有効にしている場合、リスト（JQueryを使用）は、ホバー上でポップ・ダウンするように設定されます（下位liの表示をnoneからblockに変更することによって）。

#navはposition: relativeと高いzインデックスを持ち、#contentはposition: absoluteに設定され、リストがコンテンツの上部に流れるようになっています。それ以外の場合、コンテンツはリストに対応するために下に移動します。

Safari v5とChrome v11でうまくいきます。しかし、FF v10とOpera v11（とIEは、しかしそれは与えられていますが）は、#contentをの先頭からの右端にオフセットすることを決めました。

私はこれを解決するために#containerの位置をrelativeに設定しましたが、何もしません。簡単に言えば、行番号position: absolute;は物事を変えるものです。

私はここで私のCSS /位置付け知識の限界にいるので、どんな助けでも大歓迎です。

HTMLを書くことはとても面倒で冗長ですが、あなたがHAMLを知らない場合でも、あなたは理解しますので、私はここにHAMLを使用しました：

#container.container_16 
    #header.prefix_3.grid_10 
    %h1 
     My wonderful web site 
    #nav.prefix_3.grid_10 
    %ul.vert_nav.grid_2 
     %li.head 
     Home 
     %li.sub 
     About 
     %li.sub 
     Contact us 
    #content.prefix_3.grid_10 
    %p 
     Lorem ipsum... 

    #footer 
    %p 
     You've reached the end. 

CSSのビット：

#container { 
    height: auto !important; 
    min-height: 100%; 
    position: relative; 
} 

#content { 
    height: 100%; 
    padding-bottom: 1em; 
    padding-top: 0.2em; 
    position: absolute; 
    z-index: 1; 
} 

.container_16 .grid_10 { 
    width: 580px; 
} 

.container_16 .prefix_3 { 
    padding-left: 180px; 
} 
.container_12, .container_16 { 
    margin-left: auto; 
    margin-right: auto; 
    width: 960px; 
} 

#nav ul.vert_nav li { 
    margin-left: 0.3em; 
    margin-right: 0.3em; 
    text-align: center; 
} 

#nav li.sub { 
    background-color: #000000; 
    display: block; 
    position: relative; 
    z-index: 500; 
} 

といくつかのJS：要するに

(function() { 

    jQuery(function($) { 
    $("li.sub").toggle(); 
    $("#content").css("top", "12em"); 
    return $("ul.vert_nav").mouseenter(function() { 
     return $(this).find("li.sub").show(); 
    }).mouseleave(function() { 
     return $(this).find("li.sub").hide(); 
    }); 
    }); 

}).call(this); 

：

1. メニューがコンテンツの上を飛ぶようにするには、コンテンツdivに絶対位置が必要です。
2. これは960gで動作する必要があります。

これらの要件を外れるには、本当に固い理由が必要です。

Answer 1

#contentを絶対的に配置するのではなく、絶対に代わりにドロップダウンアイテムを配置する必要があります。

たとえば、あなたが持っている可能性があり：

HTML

<ul> 
    <li> 
     No drop down 
    </li> 
    <li> 
     A drop down 
     <ul> 
      <li>option 1</li> 
      <li>option 2</li> 
     </ul> 
    </li> 
</ul> 

CSS

ul li { 
    display: inline-block; 
    position: relative;  /* for the absolutely positioned children */ 
} 

ul li ul { 
    position: absolute; 
    top: 1em; 
    left: 0px; 
} 

の作業例：http://jsfiddle.net/JeAH8/