显示：表格单元格高度问题

Question

我有一个水平导航，显示像一张桌子。

标记如下：

<nav>
    <ul>
        <li><a href="">link</a></li>
        <li><a href="">multi line link</a></li>
        <li><a href="">any other link</a></li>
    </ul>
</nav>

显示：table-cell似乎计算额外空格并添加填充以填充空白。

这是小提琴：http://jsfiddle.net/F6DKx/

我需要它来增加高度而不是填充额外的空间，所以内部的锚元素可以与孩子在底部绝对定位一样高。

这是css：

nav { display: table; }
ul { display: table-row; }
li { display: table-cell; vertical-align: middle; }
a { position: relative; height: 100%; }
a:after {
    content: "";
    position: absolute;
    bottom: 0; left: 50%;
    width: 5px; height: 5px;
}

有什么想法吗？