table-cell、Firefox 和 Chrome 内的绝对定位

Question

我正在尝试构建一个子导航菜单，我决定使用display: table。

这是一个有 4 列的水平子菜单，每列中都有可变数量的链接。我需要做的是在每一列中显示一个链接，除了我刚才提到的那些链接，在底部对齐，所以像：

first column | second column
             |
link1        | link1
link2        | link2
link3        | link3
             | link4
             |
bottom link  | bottom link

重要的是底部链接垂直对齐。

我在 jsfiddle 中重新创建了整个内容： http://jsfiddle.net/skn2dshv/7/

除了不能正常工作之外，主要问题之一是它在 firefox 和 chrome 之间的行为不同。在 Firefox 上，底部链接应出现在 table-cell 容器内，而在 Chrome 上则显示在外部。

我也看过这个：http://davidwalsh.name/demo/table-cell-position-absolute.php 但仍然无法弄清楚我的代码有什么问题。

Answer 1

试试这个：

#gallery-submenu .dropdown-column .all-link {
    top: 100%;
    position: absolute;

    text-transform: uppercase;
}

它将您的链接放在column-links-wrapper 的所有 100% 高度的末尾。 jsfiddle Demo

如果您希望所有链接成行，您应该给column-links-wrapper 一个静态高度。 jsfiddle Demo