使用嵌套表格单元格时的奇怪行为答案

【问题标题】：Weird behaviour when using nested table-cell使用嵌套表格单元格时的奇怪行为
【发布时间】：2016-03-19 15:34:13
【问题描述】：

我创建了一个水平菜单，但当其中一个单元格的内容比其他单元格大时，我遇到了问题。

为了看看会发生什么，我编辑了 2 个 JSFiddle 以便您观察问题：

JSFiddle with equal content

JSFiddle with one of the cell larger than others

我在display : table 中使用了ul，在display : table-cell 中使用了li，在display : table-cell 中使用了li 内的链接标签。

我不明白为什么当内部内容大于其他单元格时，表示链接标签的嵌套表格单元格会在顶部添加一个奇怪的空格。

有人能指出我正确的方向吗？如果需要，请随意完全更改 css，唯一的要求是保留标签层次结构，因为我使用 Wordpres wp_menu_nav() 函数给我这个输出。

【问题讨论】：

标签： html wordpress css tablecell

【解决方案1】：

这是一个 Chrome 漏洞，违反了CSS tables spec:

vertical-align: baseline：单元格的基线放在与它跨越的第一行的基线高度相同

单元格的基线是单元格中第一个流入line box 的基线，或单元格中第一个流入表行的基线，以先到者为准。如果没有这样的行框或表格行，则基线是单元格框内容边缘的底部。

li 元素是 table-cells，默认为 vertical-align: baseline。它们包含一个atable-cell，它被包裹在匿名table-row 和table 中。所以a的第一行应该是对齐的，但Chrome似乎是对齐最后一行。

你可以修复它

#menu > li {
  vertical-align: middle;
}

body {
  margin: 0px;
}
#menu {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  display: table;
  width: 100%;
  height: 80px;
}
#menu > li {
  display: table-cell;
  height: 80px;
  width: calc(100% / 6);
  border: solid 1px black;
  box-sizing: border-box;
  vertical-align: middle;
}
#menu > li > a {
  display: table-cell;
  height: 80px;
  width: calc(100% / 6);
  background: lightgrey;
  vertical-align: middle;
  box-sizing: border-box;
}

<ul id="menu">
  <li><a href="">first link</a></li>
  <li><a href="">Second link</a></li>
  <li><a href="">Third link</a></li>
  <li><a href="">Fourth link</a></li>
  <li><a href="">Fifth link</a></li>
  <li><a href="">Sixth link Sixth link Sixth link</a></li>
</ul>

【讨论】：

【解决方案2】：

这是解决办法。 https://jsfiddle.net/akysrs3t/7/

body {
  margin : 0px;
}

#menu {
  list-style-type : none;
  margin : 0px;
  padding : 0px;
  display : table;
  width : 100%;
  table-layout: fixed; /* makes the with distribute equally amongst the items of the menu */
}

#menu > li {
  display : table-cell;
  border : solid 1px black;
  box-sizing : border-box;
  vertical-align : middle;
  text-align: center;
}

#menu > li > a {
  display : block;
  height: 80px;
  line-height: 80px;
  background : lightgrey;
}

您可以通过 JSFiddle 看到示例中的结果。看看 table-layout 的值：以及。

你并不真的需要 calc()。

最好的，乔治

【讨论】：