jquery - 内联 block 内的 CSS 绝对子项导致布局错误

Question

对于我的生活，我无法弄清楚为什么会这样......任何人都可以在这个 jsfiddle 中看到为什么如果你将鼠标悬停在百叶窗元素上，其他两个会下降吗？

http://jsfiddle.net/vBR23/

jQuery(window).load(function(){
    jQuery('#topMenu li.has-children > a').each(function() {
        jQuery(this).parent().data('width', jQuery(this).innerWidth() + 14);
    });

    jQuery('#topMenu li.has-children').hover(function() {
        jQuery(this).css({ width: jQuery(this).data('width') + 'px' });
        jQuery(this).children('a').css({
            background: '#fff',
            left: '0',
            padding: '0 7px',
            position: 'absolute',
            top: '0',
            zIndex: '2'
        });
    }, function() {
        jQuery(this).css({ width: 'auto' });
        jQuery(this).children('a').css({
            background: 'transparent',
            left: 'auto',
            padding: '0',
            position: 'relative',
            top: 'auto',
            zIndex: '2'
        });
    });
});

我已经尝试尽可能地从它提取的元素中剥离它，但基本上我正在做的是当您将鼠标悬停在 li 上时，在绝对和相对定位之间切换内部“a”。在我看来，无论内容如何，​​li 都应该彼此并排呈现......它们都是相对位置且具有定义的高度。

似乎发生在 FF、Chrome 和 Opera 中。我还没有尝试过 IE。

谢谢。

Answer 1

将vertical-align:top 添加到li 标签。 http://jsfiddle.net/vBR23/1/