display:table in <ul><li> to get vertical-align:middle of <a> item produces Chrome/Chromium issue?

问题

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).

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

This doesn't happen on Firefox.

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?

Thanks!

回答1:

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;
}

Example

来源：https://stackoverflow.com/questions/20073776/displaytable-in-ulli-to-get-vertical-alignmiddle-of-a-item-produces-chro