2011-10-21 14 views
3

固定されたトップバー、その下に広告バー、コンテンツが配置されている必要があります。ユーザーエクスペリエンスを向上させるためには、コンテンツを最初に読み込み、広告を待たないでください。したがって、コンテンツはHTMLの中でより高くなります。これはすべての最新のブラウザで動作しますが、IE 7は問題です。IE7の配置に関する問題(トップバーの絶対位置と固定位置が所定の位置にとどまる)

Here is the page

それは最初のロードだと、正しいパディングをロードするように思えるが、上に他の二つのdiv負荷後、内容は「上に移動」と上の2つのdivタグの後ろに隠します。

IE7のその他の問題は次のとおりです。 - 右側のトップ10リストのguillemot(>>)の位置。 - ページを下にスクロールすると、右下にボックスが表示されます。このボックスの閉じる(x)ボタンの位置は、IE7では正しくありません。

私は、IE7マーケットシェアが低下したときに使用を中止できるIE7Fixes.cssファイルが最適なソリューションだと考えています。しかし、私は、そのファイルに入れるにまさに上の任意の提案をいただければと思います:)

答えて

1

は、ここで説明するバグのような音:http://www.quirksmode.org/bugreports/archives/2007/03/ie7_positionfixed_and_margin_top_bug.html

はあなたのページの上部に固定層をしたいと想像し、すべてがそのレイヤーの下をスクロールするには が続きます。

明らかにエクスプローラ7は に続く 'position:relative' divのための上マージンを計算することができません。固定:高いz-インデックスを持つもの。 2番目のレイヤーは となります。マリントップ(ic)の場合は、 と定義します。私の仕事は何

dfncontainerからmargin-top: 200pxを削除し、bodyからpadding-topとして代わりにそれを追加することでした。しかし、それはIE7でレイアウトを修正していますが、IE8とIE9(他のブラウザはテストしていません)で余分なパディングが追加されるため、IE7専用のスタイルシートが必要です。ウミガラスのために


、私は実行可能な修正のようだというthis Stack Overflow question/answerを見つけました:

.list-box OL LI { 
    position: relative; 
} 

.list-box .guillemot { 
    /* <<delete these rules>> 
     float: right; 
     margin-right: 7px; 
    */ 
    position: absolute; 
    right: 7px; 
} 

「良いニュースは、修正プログラムは、同様IE8とIE9で動作するように見えるということですので、あなたはおそらくドン条件付きスタイルシートが必要です。

「関連項目」ボックスにXボタンの位置も代わりに、一貫性のある動作を得るために、フローティングのposition: absolutetoprightの組み合わせを使用して配置することができます。

+0

ありがとうございました!これはうまくいった。 – tinkerr