3

すべての要素の幅が同じになるようにテーブルとしてフォーマットされたリスト要素を使用してナビゲーションを実行したいのですが、Firefoxでは機能しません。

HTML：

<div id="#navigation">
   <ul>
      <li>
         <a>Menu1</a>
         <ul>
            <li><a>Sub1</a></li>
            <li><a>Sub2</a></li>
         </ul>
      </li>
      <li><a>Menu2</a></li>
   </ul>
</div>

CSS（一部のプロパティが欠落していますが、色などのみです...）：

#navigation {
   position: relative;
   height: 25px;
   width: 852px;
}

#navigation>ul {
   width: 850px;
   top: 0px;
   padding: 0;
   margin: 1px;
   list-style-type: none;
   display: table;
   table-layout: fixed;
   border-collapse: collapse;
}

#navigation>ul>li {
   position: relative;
   height: 25px;
   display: table-cell;
}

#navigation>ul>li>ul {
   position: absolute;
   width: 100%;
   margin: 0;
   padding: 0;
   list-style-type: none;
}

#navigation>ul>li>ul>li {
   /* nothing really happening here */
}

JSフィドル： http： //jsfiddle.net/ZrsXv/2/

Chrome、Safari、IE8以降ではすべて正常に動作し、IE6とIE7でもいくつかの変更が加えられています

Chromeメニュー

しかし、Firefoxでは常にこれを取得します

FFメニュー1

私は問題を抱えている最初の人ではないことを知っていますが、stackoverflowで見つけた解決策も試しましたが、何かが変わった場合はこれがすべてです

FFメニュー2

それで、すべてを台無しにしない解決策はありますか？

4

3 に答える 3

3

あなたの問題はその立場だと思います。テーブルセルでは実際には機能しません。現時点ではソースを見つけることができませんでしたが、以前に同じ問題が発生したことは間違いありません。

つまり、Firefoxで起こっていることは、＃navigation> ul> li> ulの幅が#navigationの100％として計算されることです。これは、静的（デフォルトの位置値）以外の位置値を持つ最も近い祖先です。

位置が相対のダミー要素を挿入することで、問題を回避できます。（f.ex. a div）#navigation> ul> li内で、次に#navigation> ul>li>ulを#navigation>ul>li>div>ulに変更する必要があります

于 2012-06-14T21:08:11.157 に答える
0

最も簡単な解決策は、ネストされたリストから作成されたメニューの既存の例を参照することです。

http://www.devarticles.com/c/a/HTML/Building-a-Drop-Down-Menu-with-Nested-HTML-Lists/2/

なぜあなたが使っているdisplay: tableのかもよくわかりません。最後に自分でマルチレベルメニューを作成してからしばらく経ちましたが、その表示方法を使用したことはなく、簡単な検索で見つけた例も使用しませんでした。

于 2012-06-14T19:58:57.040 に答える
0

他の回答やコメントを読んで私はあなたが使用している理由を理解しています、display: tableそしてそれは受け入れられるかもしれません...

私はさまざまな解決策を試しましたが、Firefoxでは何も機能しません。したがって、このメソッドの使用に興味がある場合は、ここでjsfiddleで行ったように、javascript/jQueryを使用して最初のli要素幅を子に与えることをお勧めします。ul

そうでなければ私は別の方法であなたを助けることができません...ごめんなさい。

于 2012-06-15T09:46:30.643 に答える