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）