html水平メニューがfirefox 4で垂直に表示されます。

Question

Firefox 4（ベータ10）のウェブサイトをテストして水平メニューが垂直に表示されました。 Chromeで

、メニューには、このような水平である：

が、Firefoxの4、それはこのように現れる：私はsuperfish horizontal menuを使用しています

。ウェブサイト上の例は、Firefox 4でうまく見えます。

これはfirefox 4のバグか、水平メニューコードに問題がありますか？

Answer 1

私はあなたの問題がスーパーフィッシュまたは下にある吸盤であるとは思わない。クイックルックでは、<div id="title">が左にフローティングされていますが、フロートは<table id="menuHeader">の間でクリアされません。 #menuHeaderテーブル、したがって<ul>は、Firefoxでは#titleのすぐ横に配置されているため、フロートが水平方向にレイアウトするのに十分な幅がテーブルに与えられません。あなたはFirefoxの問題が離れて行くのを見なければならない

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

と：

迅速なハックとして、あなたは<br/>右#menuHeader前に詰め込むことができます。しかし、#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のインスペクタ、推測の仕事、経験、そして多くの誓いは、このようなことを理解するための私のツールです。