Firefox 4でHTMLの水平メニューが垂直に表示される

Question

Firefox 4 (ベータ 10) で Web サイトをテストしたところ、水平メニューが垂直に表示されました。

Chrome では、メニューは次のように水平になります。

しかし、Firefox 4では次のように表示されます。

私が使用しているのは、 スーパーフィッシュの水平メニュー. 。Web サイトの例は Firefox 4 で問題ないようです。

これがFirefox 4のバグなのか、それとも水平メニューコードに何か問題があるのか​​、どうやって調べればよいでしょうか??

Answer 1

あなたの問題はスーパーフィッシュやその根底にあるサッカーフィッシュではないと思います。ざっと見てみると、 <div id="title"> は左にフロートされますが、そのフロートはそれとの間でクリアされません。 <table id="menuHeader">. 。の #menuHeader テーブル、したがって <ul> すぐ横に位置しています #title Firefox では、フロートを水平にレイアウトするのに十分な幅がテーブルに得られません。

簡単なハックとして、 <br/> 直前 #menuHeader:

<br /><table id="menuHeader">

そうすれば、Firefox の問題が解消されるはずです。ただし、その後、適切な場所でフロートを明示的にクリアする必要があります。 #title そしてその前に #menuHeader. 。間の清算 #header そして #flashwrapper 適切だと思われます:

<div id="header">
    <!--...-->
</div>
<div style="clear: both;"></div>
<div id="flashwrapper">
    <!--...-->
</div>

を使用できるかもしれません overflow:hidden これもクリア修正で解決できますが、私は、たとえスタイル情報で HTML を汚染するとしても、明示的にクリアすることを好む傾向があります。

そして、この種のことをデバッグする方法に関して言えば、WebKit ブラウザー (Chrome や Safari など) の DOM インスペクターは非常に優れています。Firebug の DOM インスペクターも非常に優れています。このような場合は、両方を同時に使用するとよいでしょう。DOM インスペクター、推測、経験、そして多くの悪口が、このような問題を解決するための私のツールです。