內聯塊內的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

在li標簽中添加vertical-align:top 。 http://jsfiddle.net/vBR23/1/