display：table in< ul>< li>得到vertical-align：< a>的中间。项目产生Chrome / Chromium问题？ [英] display:table in <ul><li> to get vertical-align:middle of <a> item produces Chrome/Chromium issue?

问题描述

在< nav> 栏布局上我使用 display：table < a>< code>上的< ul>< ul>< li> item和 display：table-cell / code>项目，以便能够使用< a> 项目中的 vertical-align：middle 。 （有些项目是多行的，因此不能设置 line-height ）。

On a <nav> bar layout I used display: table on the parent <ul><li> item and display: table-cell on the child <a> item to be able to use vertical-align: middle on the <a> item. (Some items are multiline, so setting line-height is not a possibility).

在Chrome / Chromium I当我将鼠标悬停在菜单项上时（只有当他们有孩子时），获得整个< nav> bar'shift'。

On Chrome/Chromium I get the whole <nav> bar 'shifting' to the right when I hover over menu items (only when they have children).

这在Firefox上不会发生。

This doesn't happen on Firefox.

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

Load the jfiddle in both browsers and see:

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

有没有人有什么想法为什么会这样？ /如何解决？

Does anyone have any ideas why this happens? / how to get around it?

谢谢！

推荐答案

认为左移是由于你的第一级李被浮动左。如果你改变这些表格单元格，你应该停止转变：

I think the left shift is due to your first level li's being floated left. If you change these to table-cells as well you should stop the shift:

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

示例

这篇关于display：table in&lt; ul&gt;&lt; li&gt;得到vertical-align：&lt; a&gt;的中间。项目产生Chrome / Chromium问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！