创建滚动条时的浏览器兼容性问题

Question

我有一些div，假设有100个。这些框是水平的，我还有两个箭头，当鼠标放在它们上面时，它们会将框向左或向右移动。

问题是，当我把鼠标放在左箭头上时，如果第一个框不在其实际（加载时）位置，则应该向左移动，但如果它在其位置上，则应该被锁定并且不再移动。在Chrome中可以工作，但在其他浏览器中看起来像这样：

我的代码也是这样的： function shiftToLeft() { firstEntity = $(".entities").first(); entityWidth = firstEntity.outerWidth(); entitiesAreaWidth = $("#slideshow_entity").width();

            if (firstEntity.offset().left != entitiesAreaWidth - entityWidth)
                firstEntity.animate({
                    'marginRight' : "+=4px"
                }, 0);
            else
                $("#slideshow_entity_arrow_left").css('background-image',
                        "url(" + leftArrowNormal + ")");
        }

请问您能帮我吗？为什么这段代码只在Chrome上（仅限Windows操作系统）有效？（对不起，我无法正确排列上面的一部分代码。）

- HMdeveloper

---

你能否发布一个JSFiddle？ - smcjones

这是链接，但由于它是一个非常大的项目，并且许多资源组合在一起返回结果，我无法将所有内容都放在fiddle head中，但至少您可以更容易地查看html和javascript。谢谢:) http://jsfiddle.net/hminaee/eeSqH/ - HMdeveloper

同时需要注意的是，我添加的HTML是一个组件，将被添加到JSP文件中。 - HMdeveloper

谢谢，我不知道如何将项目放入Fiddle中，我认为这是不可能的。 - HMdeveloper

我可以告诉你，我在Chrome中遇到了样式问题，具体来说是边距。你应该尝试进行一些调试。console.log(firstEntity.outerWidth()); console.log($("#slideshow_entity").width()); console.log(firstEntity.css('marginLeft')); console.log(firstEntity.css('marginRight')); console.log($("#slideshow_entity").offset().left); ..... 你能告诉我你得到了什么并在你的问题中编辑吗？在Chrome和至少一个不起作用的浏览器中。 - smcjones

Answer 1

请使用以下代码行代替：

if (Math.ceil(firstEntity.offset().left) != entitiesAreaWidth - entityWidth)

- HMdeveloper