Question

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

如果你看一下HERE，我想要完成的是当有人点击“产品，规格表，横幅等”时它切换到正确的幻灯片（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，但它有点冗长，可以查看HERE（它位于评论“这里是标签内容的CSS”）。从JS中可以看出，箭头应该在350ms的正确标题下滑动，相关的UL滑动到位。现在IE和Firefox中的运动似乎很好，只是指向箭头的位置偏离了。希望社区中有人可以发现我的缺陷。提前谢谢。

Answer 1

尝试将display更改为{/ 1}}

inline-block

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

Answer 2

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

DIV在IE和Firefox中定位不同

2 个答案: