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）时，页面呈现就好像根本没有 no 样式表一样 - 但是再次，仅服务器而不是本地。 PrefixFree的一个副作用是它需要外部样式表并在页面上内嵌它们。那么外部样式表是不是使用正确的content-type或其他东西？

更新3：当我尝试通过直接URI验证CSS时，我从W3C验证器中收到此错误：

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

这是什么意思？

Answer 1

您已在$(document).ready电话中声明了许多功能，但您可以将它们移到外面。

可能导致您麻烦的一个原因是当您将函数调用附加到$(window).resize时调用sealPosition()，但这是在它下面声明的。

我们在将这些内容附加到匿名函数之后声明了一些奇怪的问题。尝试移动resize附上或ready来电之外的sealPosition声明。

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拿出来并且bam，页面加载时没有任何样式。

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

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

更新：这是S3 and Transmit on OS X特有的问题。在传输首选项中，为CSS设置自定义上传标题（content-type：text / css），问题解决了！

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

3 个答案: