<ul><li> 中的 display:table 获取 vertical-align:middle of <a> 项目会产生 Chrome/Chromium 问题？答案

【问题标题】：display:table in <ul><li> to get vertical-align:middle of <a> item produces Chrome/Chromium issue?<ul><li> 中的 display:table 获取 vertical-align:middle of <a> 项目会产生 Chrome/Chromium 问题？
【发布时间】：2013-12-03 03:17:45
【问题描述】：

在<nav> 栏布局上，我在父项<ul><li> 上使用了display: table，在子<a> 项上使用了display: table-cell，以便能够在<a> 上使用vertical-align: middle。（有些项目是多行的，所以不能设置line-height）。

在 Chrome/Chromium 上，当我将鼠标悬停在菜单项上时，整个 <nav> 栏向右“移动”（仅当它们有子项时）。

这在 Firefox 上不会发生。

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

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

有没有人知道为什么会发生这种情况？ / 如何绕过它？

谢谢！

【问题讨论】：

你意识到你真的不需要任何Javascript代码来实现这样的菜单，对吧？可以用纯 CSS :hover 来完成。
@Spudley，谢谢，是的，我确实意识到这可以用纯 CSS 完成，但这是遗留问题，无法重写。

标签： css firefox html-lists vertical-alignment chromium

【解决方案1】：

我认为左移是由于您的第一级 li 向左浮动。如果您也将这些更改为表格单元格，您应该停止班次：

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

Example

【讨论】：