0

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

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

中间的白框应该是完全居中的；当您完成表格的每个步骤时，下一步应该从右侧滑入。定位/滑动是用/js/slider.jsjQuery 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

这意味着什么？

4

3 回答 3

0

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

我把 PrefixFree 拿出来然后 bam，页面加载时没有任何样式。

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

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

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

于 2012-09-10T02:30:43.847 回答
0

似乎触发了调整大小事件 ( $(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();
}
于 2012-09-10T02:17:59.143 回答
0

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

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

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

于 2012-09-10T01:25:27.883 回答