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

Question

我很困惑:我构建的登陆页面在本地运行非常好，但是当我把它上传到我们的服务器时，它就完全崩溃了。

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

中间的白色框应该是完美的居中；当你穿过表单的每一步时，下一步应该从右边滑进来。定位/滑动是用/js/slider.js和jQuery UI完成的。如果您下载该页面并在本地计算机上查看它，它应该看起来非常正确。

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

更奇怪的是:它不会100%的破掉。如果我坐在那里，不断刷新页面，也许每10次尝试中就有1次，它就会完美地显示出来。然后我重新振作，它又坏了。

更新:这是我看到的屏幕截图，都来自OS上的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)时，页面呈现的样子就好像在所有- but上都没有样式表一样，只是在服务器上，而不是在本地。PrefixFree的一个副作用是它获取外部样式表并将它们内联地插入页面。那么，外部样式表是否没有得到正确的content-type之类的服务呢？

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

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

那是什么意思？

Answer 1

我想我得到的it...the CSS是用错误的MIME类型提供的：binary/octet-stream而不是text/css。我从未注意到这一点，因为我在页面上使用了一个名为PrefixFree的PrefixFree插件，而且使用它的一个副作用是，在加载文档之后，外部样式表会作为内联样式插入页面。

我拿出了PrefixFree和bam，页面加载没有任何样式。

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

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

更新:这是一个专门针对S3和OS上的传输的问题。在传输首选项中，为CSS (内容类型: text/css)设置一个自定义上传头，问题就解决了！

Answer 2

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

引起麻烦的原因之一是，当您将函数调用附加到$(window).resize时，您调用了sealPosition()，但是下面声明了这个函数调用。

在将它们附加到类似的匿名函数中之后，我们有一些奇怪的问题来声明它们。尝试将sealPosition声明移到resize附加或ready调用之外。

Answer 3

它似乎触发了一个调整大小事件($(window).resize())中心的对话框。我建议，就像提到的那样，稍微重新排列中心代码：

$(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();
}