5

Web ページの右上部分 (ヘッダーとナビゲーションの下) に動的にサイズ変更されたサイドバーをフロートさせ、その周りにページ フローのメイン コンテンツを配置しようとしています (「L」字型を除く)。 「L」の下の部分が本当に厚い）。サイドバーの幅と高さはページごとに異なるため、厳密な値は使用できません。

私のcssは次のようになります：

#main {
    width: 850px;
    height: auto;
}

#sidebar {
    width: auto;
    float: right;
}

（さらに、パディング、マージン、および背景色コードは重要ではないと思います）

私のhtmlは次のようになります：

<div id="wrapper">  
    <div id="header">    /* header stuff */    </div>  
    <div id="nav">       /* nav stuff */       </div>  

    <div id="sidebar">  
        /* my sidebar content, really just an h3 and a ul */
    </div>

    <div id="main">
        /* lots of content here */
    </div>
</div>

最初にサイドバーの div を作成する必要がある理由が完全にはわかりませんが、このコードは FF、Chrome、Safari (Windows)、および IE8 で正常に動作します。しかし、IE7 (および私が気にしない IE6) では、サイドバーの div に "clear: left" があるかのように、メイン コンテンツがサイドバーの下部に押し下げられます (しかしありません)。 .

特にIE8は他のブラウザとまったく同じように動作するため、これはIE7の非準拠バグの1つであると感じています。しかし、私はそれを修正する方法がわかりません。

何か案は？ティア。

4

3 に答える 3

2

まず、IE7 を厳密モードにする doctype を使用していることを確認します (説明については、http://hsivonen.iki.fi/doctype/ を参照してください)。それでもうまくいかない場合は、マージン幅に遊びが必要な可能性があります。

サイドバー div を最初に配置する必要がある理由は、div はブロック要素として表示されるため、それ以降はその下に表示されるためです (メイン div をフロートしない限り)。

サイドバーの div をフローティングして最初に配置することで、ブラウザはメインの div をサイドバーの右側に表示できることを認識します。メイン div に float left を追加し、サイドバー div から float を削除してメイン div の後に移動することで、同様の効果を得ることができます。

于 2009-06-05T02:07:02.740 に答える
0

あなたの説明からすると、サイドバーがブロック要素であるかのように動作しているようです。inline-block などの別の表示オプションを試してみてください。width min-width 属性も試してみます。言いにくいけど。

于 2009-06-05T02:00:40.150 に答える
0

ビンゴ！修理済み！幅とマージンで遊んでいると述べた人は、今夜ゴールドスターを獲得します. メイン div の固定幅を削除し、右側にパディングを追加して、テキストと画像のガターを作成するだけでよいことがわかりました。FF3、Chrome、Safari (Win)、そして最も重要な IE6 & IE7 (私はまだ IE が嫌いですが) でテストおよび確認されています。

IE レンダリング エンジンは、「メイン div の幅を 850 ピクセルにしたいのはわかりましたが、サイドバーがそこに詰まっているので、スペースがないので、サイドバーの下に押し込む必要があります」と言っていました。 . もちろん、他のすべてのブラウザーのレンダリング エンジンは、「あなたがやろうとしていることは完全に理解できます。問題ありません。すべてをあなたが望むとおりにレイアウトします。」と言っていました。

于 2009-06-05T02:37:37.423 に答える