css - 位置 : fixed inside display: table bug

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 position: fixed 将其拉出流程。 display: none 导致元素不计入列目的(正如人们所期望的那样)。

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

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

作为旁注，ul 中的裸div 不是有效的 html 结构(ul 应该只有 li 元素作为直接子元素)。