2

私は本当にイライラする問題に遭遇しました。の中にあるメニュードロワーを作成しようとしています<ul>。<div>テーブル内のネストされた が の場合、display: {fixed,absolute}別のテーブル セルがある場所に空白のプレースホルダーが表示されます。理由や回避方法がわかりません。

コードの CodePen はこちら: http://codepen.io/quicksnap/pen/gsHrbで、一番上のクラスを切り替えて、私が話していることを確認できます。

このマークアップ構造を保持し、親テーブルの表示を変更せずに固定/絶対を表示する理由または方法についての洞察に感謝します。

マークアップ:

<ul>
  <li>
    <a href=""><span>Lorem</span></a>
  </li>
  <li>
    <a href=""><span>Lorem</span></a>
  </li>
  <li>
    <a href=""><span>Lorem</span></a>
  </li>
  <li>
    <a href=""><span>Lorem</span></a>
  </li>
  <div class="fixed"/>
</ul>

CSS:

/*
 Why does the display: table show an empty placeholder for
 an element inside that is position: fixed/absolute?
*/

/* Comment out/remove !important to see bug */
.fixed { display: none !important; }

.fixed { 
  display: block;
  position: fixed; top: 60px; left: 0;
  width: 100%; height: 100px;
  background: salmon;
}

ul {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 60px;
  display: table;
  table-layout: fixed;
  position: relative;
  background: #ccc;
}

ul > li {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
4

3 に答える 3

1

table通常の要素でも同じように見えるため、これがバグなのか予想される動作なのか (私は調査していません)、本当にわかりません。ただし、table-layout: fixed設定されているプロパティに関係しているようです。table-layout: fixedこれは、が列数に基づいてサイズを計算し、ページのレンダリング時にそれを「列要素」としてカウントしているように見えるためだと推測していposition: fixedます。これdisplay: noneにより、列の目的で要素が（予想どおり）カウントされなくなります。

あなたの問題は、（あなたの場合は）を持ってから、セル（あなたの場合は25％）を適切な幅（あなたの場合は25％）に設定することで解決tableするulようtable-layout: autoですli。

table通常の要素で起こっているこれらすべての図については、このフィドルを参照してください。

補足として、naked divin aulは有効な html 構造ではありません (直接の子としてulのみ要素を持つ必要があります)。li

于 2012-12-13T20:03:26.023 に答える
0

あなたのdiv /固定クラスの目的は何ですか? ただし、別の ul またはリストをネストして、その上に「固定」クラスを置くことができます。高さ 100% を追加すると、背景全体がサーモン色になります。

于 2012-12-13T20:02:56.477 に答える
0

表示がまたはdisplay: tableに設定されているかどうかに関係なく、子要素を固定レイアウトでレンダリングするようです。ブロック要素として表示されている場合、セルが描画されます。absolutefixed

これは「バグ」の簡略版です。

http://codepen.io/quicksnap/pen/xuDwG (Lorem アイテムの右側にある余分なスペースに注意してください)

table-captionforを使用しliて固定要素または絶対要素にネストすると、要素がセルとして描画されないように見えます。

これが私が探していたものの例です: http://codepen.io/quicksnap/pen/noBvm

無効な HTML を指摘してくれた ScottS に感謝します。なぜこのように機能するのかがわかりましたが、table-cell絶対/固定されていない要素に対してテーブルがセル空間を描画している理由はまだわかりません。

于 2012-12-13T21:03:52.083 に答える