DIV在IE和Firefox中定位不同

Question

这是一个非常简单的问题，显然这是我的CSS或JS的一个问题，我的大脑太过于盯着看这一整天看到它。

如果你看看这里 ，我想要完成的是当有人点击“产品，规格表，横幅等”时 它切换到正确的幻灯片（UL元素），向下的箭头在正确的标题下滑动。 Chrome中的一切都很有用; 但是，在Firefox中 - 箭头是向右的，而在IE中，它位于容器下方。 这是JS：

var TabbedContent = {
    init: function() {  
        $(".category").click(function() {
            var background = $(this).parent().find(".selected");
            $(background).stop().animate({
                left: $(this).position()['left']
            }, {
                duration: 350
            });
            TabbedContent.slideContent($(this));
        });
    },
    slideContent: function(obj) {
        var margin = $(obj).parent().parent().find(".sliderContainer").width();
        margin = margin * ($(obj).prevAll().size() - 1);
        margin = margin * -1;

        $(obj).parent().parent().find(".displayContent").stop().animate({
            marginLeft: margin + "px"
        }, {
            duration: 1
        });
    }
}
$(document).ready(function() {
    TabbedContent.init();
});

我会粘贴CSS，但它有点冗长，可以在这里查看（它在评论“这里是标签内容的CSS”）。 从JS中可以看出，箭头应该在350ms的正确标题下滑动，相关的UL滑动到位。 现在IE和Firefox中的运动似乎很好，只是指向箭头的位置偏离了。 希望社区中有人可以发现我的缺陷。 先感谢您。

Answer 1

尝试将display更改为inline-block

.tabbedContent .tabs {
    display: inline-block;
}

（在FF和IE中测试 - 工作正常）

Answer 2

您的float没有正确设置/清除。 添加float: left; .selected和.tabs修复它在Firefox（目前无法测试IE）