Question

在<nav>栏布局上，我在父display: table项上使用<ul><li>，在子display: table-cell项上使用<a>，以便vertical-align: middle 1 {} <a>项目。（有些项目是多行的，因此无法设置line-height。）

在Chrome / Chromium上，我获得了整个<nav>栏＆＃39;转移＆＃39;当我将鼠标悬停在菜单项上时（仅当他们有孩子时）向右移动。

这不会发生在Firefox上。

在两个浏览器中加载jfiddle并查看：

http://jsfiddle.net/qcQKP/2/

有没有人知道为什么会这样？ /如何绕过它？

谢谢！

Answer 1

我认为左移是由于你的第一级li被左移。如果你将这些更改为表格单元格，你应该停止转移：

nav > ul > li {
    font-size: 11px; /* 11px */
    position: relative;
    max-width: 16em;
    height: 36px;
    display: table-cell;
    vertical-align: middle;
}

Example

显示：<ul> <li>中的表格以获得垂直对齐：<a> item produces Chrome/Chromium issue?</a> </li>的中间</ul>

1 个答案: