Question

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

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

我试图尽可能地从它摘录的项目中删除它，但基本上我正在做的是开启内部的＆＃39; a＆＃39;当您将鼠标悬停在li上时，绝对和相对定位之间。在我看来，不管它们的内容如何，它们都应该彼此并排......它们都是相对于规定高度的所有位置。

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

感谢。

Answer 1

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

内联块内的CSS绝对子导致布局错误

1 个答案: