position：绝对显示：table-cell元素导致WebKit渲染间隙

Question

我正在尝试构建一个水平菜单，其中最后一个项目是分开的并且正确定位，以便徽标找到最后一个项目和最后一个项目之间的位置。

Firefox，Opera（Presto）甚至Redmond（9.0+）中的脏东西都像我期望的那样渲染它。但是WebKit（Chrome和Safari都渲染它们）在第二个最后一个项目之后占用一些空间，其中最后一个项目将保持不position: absolute。

<header>Logo</header>
<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Statistics</a></li>
        <li><a href="#">Data Management</a></li>
        <li><a href="#">Market Research</a></li>
        <li><a href="#">Web &amp; Apps</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

我将列表显示为table，列表项显示为table-cell，因为我希望菜单的左侧部分（第一个到第二个最后一个项目，左侧​​是徽标）具有固定宽度这些项目采用内容所需的宽度。文字可以改为任何东西。直到那里，一切都很好。但是如果我给最后一个项display: block; position: absolute，WebKit就会产生这个差距（示例中为白色）。

nav ul
{
    display: table;
    background: white; /* that's what you see in webkit */
}

nav ul li
{
    display: table-cell;
}

nav ul li:last-child
{
    display: block; /* "display: none;" works like I would expect */
    position: absolute;
}

这是Fiddle。

我不确定它是否是WebKit中的错误，因为在表中绝对定位元素可能不是默认行为。另一方面，display: none像我期望的那样工作。在这两种情况下，空间消耗不应该为0吗？

有人知道WebKit中的错误，或者有人知道如何防止这种差距？

Answer 1

设置倒数第二个元素＆＃34; Web＆amp;应用程序＆＃34;显示block而不是table-cell：

nav ul li:nth-last-child(2) 
{
    display: block;
}

Display block fiddle

Answer 2

我已经把这个答案推到了其他人身上，而且经常得到“flexbox还没有被广泛支持”的回应。但是，这里又一次。 Webkit行为不端的原因是，在display: table的实现中，DOM为语义声明的单元保留了空间。实现这一目标的简单方法是简单地将这个元素分解为它自己的对象，就像你使用徽标一样。

<强> 无论其... 如果你想保持这些语义分组 - 为什么不是你，他们都满足，对吧？ - 您始终可以使用flexbox模型来克服此问题。

Here's a fiddle showing its use.

以下是我们的变化：

nav ul
{
    display: box;
    display: -webkit-flex;
    flex-direction: row;
    -webkit-justify-content: center;
    -webkit-align-items: center;
    -webkit-flex-direction: row;
    background: white; /* that's what you see in webkit */
    empty-cells: hide;
    table-layout: auto;
}

nav ul li
{
    flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
}

现在，您的项目正确覆盖了背景，因为它不再将最后一个li视为真正的表格单元格，并且仍然在表格的范围内。 Flexbox提供灵活的布局以填充可用空间。通常人们会将此视为"Holy Grail of Layout"问题的解决方案，但其使用范围不仅限于此。

因此，如果另一个“Flexbox没有得到足够广泛的支持”响应就会传入，我明白了。但是我会继续提出它作为我遇到的每一个问题的答案，因为支持 每天都在变得更好。

Answer 3

编辑一个小CSS，请看看，如果这是你想要的，Fiddle

body
{
    position: relative;
    background: #bbbbbb;
    text-align: center;
    color: white;
}

header
{
    position: absolute;
    top: 10px;
    left: 630px;
    width: 80px;
    height: 60px;
    line-height: 60px;
    background: black;
    text-transform: uppercase;
}

nav
{
    position: absolute;
    top: 20px;
    left: 20px;
}

nav ul,
nav li
{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

nav ul
{
    width: 200px;
}

nav ul li a
{
    display: block;
    padding: 1px;
    background: #0099ff;
    color: white;
    text-decoration: none;
}

nav ul li a:hover
{
    background: black;
}

nav li{
    margin-bottom: 5px;
    height: 25px;
    line-height:25px;
}

Answer 4

使用绝对值时，与此相关/相关的每件事物在像素方面都必须是绝对的。

我已经更新了小提琴，因为你的导航+徽标.header + .nav：last-child并不合适。

小提琴链接：http://jsfiddle.net/3TUk8/2/

在其他情况下，你必须这样做

nav ul
{
    display: table;
    background: #bbbbbb; /* that's what you see in webkit and same as bg color will hide it :) */
    list-style: none;
}

我希望这可以解决你的问题：）