JQuery 插件在大多数浏览器上不显示

Question

我创建了一个JQuery插件来显示可拖动的地图（xy）。

在Firefox上，它可以完美运行，但在任何其他浏览器上都存在错误。

错误：通常，地图应在站点加载时显示。但是在除Firefox之外的所有浏览器上，只有黑屏，直到您拖动地图，然后它有效。

我不知道如何解决这个问题。

示例：http://jsfiddle.net/X42Wf/

我希望你明白我的意思，如果不看这个例子（不是用 firefox），运行它，然后拖动黑色输出。

Answer 1

innerDiv.css('left')设置为

初始化时auto（表示在第一次拖动之前）。因此，在 getVisibleTiles 函数中，mapX 等于 NaN因此不会执行双精度 for 循环

你只需要编辑这个：

jQuery('<div/>', {
    id: 'GameMap',
    height: o.InnerDivHeight,
    width: o.InnerDivWidth
}).appendTo(obj);

有了这个：

jQuery('<div/>', {
    id: 'GameMap',
    height: o.InnerDivHeight,
    width: o.InnerDivWidth,
    css: {
        left: 0,
        top: 0
    }
}).appendTo(obj);

<小时 />

此外，如果您想避免对 IE 产生副作用，您应该删除对象声明末尾的尾随逗号，如以下 2 个示例所示：

jQuery('<div/>', {
    id: tileName,
    style: "some CSS string", // <----- remove this comma or it will break on IE
}).appendTo(innerDiv).text(tileName);
jQuery('<div/>', {
    id: 'GameMap',
    height: o.InnerDivHeight,
    width: o.InnerDivWidth, // <----- this one too
}).appendTo(obj);