0

メニューにこの厄介な問題があります。Firefox では、「ul」タグが親コンテナーを超えています。Chrome と IE ではそうではありません。

私が欲しいもの：ドロップダウンを親と同じ幅にしたい（クロムで例を開いて、どのように見えるかを確認してください）

例

<ul>
  <li><a href="/sommer-2013">Sommer 2013</a>
    <ul> <--- This one exceeds it's parent
      <li><a href="/sommer-2013/vinter-2012">Vinter 2012</a></li>
    </ul>
  </li>
  <li><a href="/webshop.html">WEBSHOP</a></li>
  <li><a href="/company.html">COMPANY</a></li>
  <li><a href="/stores.html">STORES</a></li>
</ul>
4

4 に答える 4

1

http://jsfiddle.net/biznuge/2vNpE/12/

元のフィドルにあったものから内臓をハッキングしました。申し訳ありません。

それを見た後、DOM の次の相対親の継承に関して、position:absolute が問題であるという説明が適切であるとは思わなかったので、"table-like" の表示モードをいじってみました。 」 構造が整っていました。

nav{
  /*display: table;*/
}    
nav>ul{ 
  /*display: table-row;*/
}
nav>ul>li{
  /*display: table-cell;*/
}

テーブルを削除した後、table-row と table-cell が表示され、幅の継承が突然機能し始めました。

メニュー構造などの特定のレイアウトを強制するためにしばらくテーブルを使用しているので、これについてもう少し見ていきます。

良い質問 @dasmikko!

于 2013-01-16T15:47:45.010 に答える
1

ulはブロック要素であるため、幅をまったく設定する必要はありません。デフォルトでは、使用可能な幅全体がすでに使用されています (100% のパディング)。についても同様ですli。

コンテナーを超えている理由については、おそらく Firefox、Chrome、IE でデフォルトのパディング/マージンが異なるためです。その場合は、、および をpadding: 0; margin: 0; border: 0オンに設定してください。ullia

于 2013-01-16T14:33:20.463 に答える
0

問題は、内部ulが絶対的に配置されていることに関連しています。絶対的な位置にあるため、相対的な幅、つまりパーセンテージは、ドキュメントのコンテナーではなく、ドキュメント自体に相対的です。幅をまったく設定しないでくださいul。コンテナに合わせてサイズが変更されます。つまり、nav ulおよびのルールから幅の設定を削除しますnav ul li ul。

なぜこれが Firefox では問題になるのに Chrome では問題になるのか、私にはわかりません。提案、誰か？

于 2013-01-16T14:41:42.117 に答える
0

パディングを0に設定しましたか？

仕様によると、パディングは幅を除外する必要があります (IE はこれを無視し、オブジェクトをコンテナーに合わせるときに Chrome が行う可能性があるようです)。

于 2013-01-16T14:32:39.203 に答える