jQuery滑块脚本在本地工作，在服务器上中断

Question

我被难住了：我构建的登录页在本地运行得很好，但当我将其上传到我们的服务器时，它完全崩溃了。

这是页面：http://register.lot18.com/slider/google/

中间的白色盒子应该是完全居中的；当你完成表格的每一步时，下一步应该从右边滑入。定位/滑动是用/js/slider.js和jQuery UI完成的。如果您下载该页面并在本地机器上查看，它应该看起来完全正确。

我从哪里开始调试它？这个页面已经在本地运行了，所以基本上我所尝试的一切都只是随机猜测。

更奇怪的是：它不会100%坏掉。如果我坐在那里不断刷新页面，可能每10次尝试中就有1次，它会完美显示。然后我恢复了精神，它又坏了。

---

更新：这是我看到的屏幕截图，都来自OS X上的Safari 6：

本地：https://dl.dropbox.com/u/547222/lp-local.jpg
服务器：https://dl.dropbox.com/u/547222/lp-server.jpg

---

更新2：当我删除PrefixFree（js/prefixfree.min.js）时，页面呈现得好像根本没有样式表一样——但同样，只有服务器上的，而不是本地的。PrefixFree的一个副作用是，它接受外部样式表并将它们内联插入到页面上。那么，外部样式表是否没有得到正确的content-type或其他什么？

---

更新3：当我试图通过直接URI验证CSS时，我从W3C验证器得到了这个错误：

I/O Error: Unknown mime type : binary/octet-stream

这是什么意思？

Answer 1

您已经在$(document).ready调用内部声明了许多函数，但您可能可以将这些函数移到外部。

有一件事可能是你遇到麻烦的原因，那就是当你把函数调用附加到$(window).resize时，你调用了sealPosition()，但这是在它下面声明的

在将事物附加到类似的匿名函数中之后，我们在声明事物时遇到了一些奇怪的问题。尝试将sealPosition声明移动到resize附件上方或ready调用外部。

Answer 2

似乎触发了一个调整大小事件（$(window).resize()）使对话框居中。正如@dave anderson所提到的，我建议稍微重新安排一下居中代码：

$(document).ready(function(){
    // [code as normal here]
    $(window).resize(function(){
        positionOnResize();
    });
    positionOnResize(); // initial positioning
}); // end document ready
function sealPosition() {
    var stepPosition = $(".step:eq(1)").position();
    $("#seal").css({
        left: stepPosition.left + 470,
        top: stepPosition.top - 80
    });
}
function dialogPosition() {
    $(".step:eq(0)").left();
    $(".step:eq(1)").center();
    $(".step:eq(2)").right();
    $(".step:eq(3)").right();
}
function positionOnResize() {
    dialogPosition();
    sealPosition();
}

Answer 3

我想我明白了…CSS使用了错误的MIME类型：binary/octet-stream而不是text/css。我从来没有注意到这一点，因为我在页面上使用了一个名为PrefixFree的jQuery插件，使用它的副作用是在文档加载后，您的外部样式表会作为内联样式插入到页面上。

我拿出PrefixFree，砰的一声，页面加载时没有任何样式。

因此，位置是关闭的，因为slider.js实际上是在通过PrefixFree加载样式之前计算它的。

我需要其他人为我在服务器上设置正确的MIME类型，所以我不能100%确认，但我确信这就是问题所在。

---

更新：这是OS X上S3和Transmit的一个问题。在Transmit首选项中，为CSS（内容类型：text/CSS）设置一个自定义上传头，问题就解决了！