html - Firefox4に垂直に表示されるhtml水平メニュー

Question

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

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

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

スーパーフィッシュ横メニューを使用しています。Webサイトの例は、Firefox4では問題ないようです。

これがFirefox4のバグなのか、それとも私の水平メニューコードに何か問題があるのか​​をどのように調査し始めますか？

Answer 1

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

<br/>簡単なハックとして、直前に詰め込むことができます#menuHeader：

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

Firefox の問題が解消されるはずです。#titleただし、float は適切な afterと beforeのどこかで明示的にクリアする必要があります#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 インスペクタ、推測作業、経験、および多くの悪口は、このようなことを理解するための私のツールです。