0

私は困惑しています。私が作成したランディングページはローカルでは完全に機能しますが、サーバーにアップロードすると完全に壊れます。

ページは次のとおりです：http：//register.lot18.com/slider/google/

真ん中の白いボックスは完全に中央に配置されているはずです。フォームの各ステップを進めると、次のステップが右からスライドインすることになっています。ポジショニング/スライドは/js/slider.js、jQueryUIを使用して行われます。ページをダウンロードしてローカルマシンで表示すると、正確に表示されます。

これをデバッグすることからどこから始めればよいですか？このページはすでにローカルで機能しているので、基本的に私が試しているのはランダムな推測です。

さらに見知らぬ人：それは100％の確率で壊れることはありません。そこに座ってページを更新し続けると、おそらく10回に1回の試行で、完全に表示されます。それから私はリフレッシュし、それは再び壊れています。

更新：OSX上のSafari6からの、私が見ているもののスクリーンショットは次のとおりです。

ローカル：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

呼び出し内でいくつかの関数を宣言しましたが、$(document).readyおそらくこれらを外部に移動できます。

トラブルの原因となる可能性があるのは、関数呼び出しを呼び出しにアタッチするときです$(window).resizeがsealPosition()、これはその下で宣言されています。

そのような無名関数にそれらをアタッチした後、物事を宣言するいくつかの奇妙な問題がありました。resizeアタッチの上またはコールの外にsealPosition宣言を移動してみてくださいready。

于 2012-09-10T01:25:27.883 に答える
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

私はそれを理解したと思います...CSSは間違ったMIMEタイプで提供されています：binary/octet-streamの代わりにtext/css。ページでPrefixFreeと呼ばれるjQueryプラグインを使用しているため、これに気付くことはありませんでした。これを使用すると、ドキュメントの読み込み後に外部スタイルシートがインラインスタイルとしてページに挿入されるという副作用があります。

PrefixFreeを取り出してバムしました。ページはスタイリングなしで読み込まれます。

つまり、 PrefixFreeを介してスタイルがロードされる前slider.jsに実際に計算しているため、位置はオフになっています。

サーバーに正しいMIMEタイプを設定してくれる人が必要なので、これを100％確認することはできませんが、それが問題であると確信しています。

更新：これは特にS3とOSXの送信に関する問題です。[送信設定]で、CSSのカスタムアップロードヘッダー（コンテンツタイプ：text / css）を設定すると、問題が解決します。

于 2012-09-10T02:30:43.847 に答える