Question

我遇到了一个非常令人沮丧的问题。我正在创建一个位于<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;
}

Answer 1

我真的不知道这是一个错误还是预期的行为（我还没有研究过），因为它似乎在普通table元素上做同样的事情。但是，它显然与正在设置的table-layout: fixed属性有关。我猜这是因为table-layout: fixed根据列数计算其大小，并且它似乎在页面渲染时计算为“column element”，显然在识别css之前{ {1}}将其拉出流动。 position: fixed导致元素不计数（正如人们所期望的那样）用于列目的。

您的问题似乎可以通过让display: none（在您的情况下为table）为ul然后将单元格（您的table-layout: auto）设置为适当的宽度来解决（在您的情况下为25％），除非它们都具有完全相同的宽度文本。

See this fiddle用于说明普通li元素上发生的所有这些事情。

作为旁注，table中的裸div个无效html结构（ul应该只有ul元素作为直接子元素。

Answer 2

你的div /固定课程的目的是什么？您可以嵌套另一个ul或列表，然后将“固定”类放在其上。如果你增加100％的高度，那么整个背景就是你的鲑鱼颜色。

Answer 3

似乎display: table会将子元素呈现在固定布局中，无论其显示是否设置为absolute或fixed - 如果它们显示为块元素，细胞得到了。

这是“bug”的简化版本：

http://codepen.io/quicksnap/pen/xuDwG（注意Lorem物品右侧的额外空间）

当table-caption用于li然后嵌套在固定元素或绝对元素中时，它似乎逃脱了元素被绘制为单元格。

以下是我要查找的内容的示例：http://codepen.io/quicksnap/pen/noBvm

感谢ScottS指出我的无效HTML - 它让我知道为什么它会像这样工作，尽管我仍然不明白为什么表格为不是table-cell的元素绘制单元格空间并定位绝对/固定。

位置：固定内显示：表bug

3 个答案: