4

わかりました、これは私が抱えている奇妙な問題です。わずかに異なる 2 つのページがありますが、いくつかの同じ要素 (基本的には 2 つの画像) を共有しています。

これらの画像はどちらも同じ CSS スタイル シートで制御されていますが、2 ページ目ではどちらも約 20 ～ 30 ピクセル低くなっているように見えます。

2 ページ目は、Doctype 宣言の前に PHP を使用しているという点で異なります。ただし、後で述べたように、これは問題ではないと思います。

この効果を確認するには、http://www.codecreek.biz/loginとhttp://www.codecreek.biz/registration/registerの両方のページを連続して見てください。

明確にするために、私はこれについてすでに多くの可能な答えを見てきました。これらのページではテーブルを使用していないため、これは私の場合ではないようです。

これが私が試したことです：

  • コード内の空白をチェックしています。ただし、これらの両方のページのソースを表示すると、実際には、問題のある 2 番目のページでは、Doctype 宣言の前の空白行が 1 行少ないことに気付くでしょう。
  • 2 ページ目から PHP コードを削除します。これも効果がありませんでした。
  • PHP の終了タグ?>と の間の明らかなスペースを減らし<!DOCTYPE HTML>て何もない状態にします。これもまた何の効果もありませんでした。
  • BOMをチェックしています。vim を使用してこれを実行した結果、BOM が使用されていないことが確認されました。
  • 私のCSSをチェックしています。奇妙なことは何も見つかりませんでしたが、私は CSS の初心者なので、これが問題かもしれないので、私のスタイル シートへのリンクを次に示します: http://www.codecreek.biz/resources/main.css . （免責事項：私はそのページを書き直している最中なので、かなり奇妙に見える場合は、そこに行ってください！）.

<body>さらに、Safari の開発者検査ツールは、2 番目のページのタグが 20 ピクセル下から始まっていることを明確に示しています。

私は正直かなり迷っています。これに対する簡単な修正があることを願っていますが、私はこれに数時間取り組んできましたが、役に立ちませんでした.

編集: これは、「タイトル」画像と「波線」画像の両方の CSS です。

#login_title { position:absolute; width:1000px; top:100px; }
#login_line { position:absolute; width:500px; top:330px; left:250px; }
4

3 に答える 3

9

登録ページの H1 にはデフォルトのマージンがあります。最初の要素にマージンを与えると、それが親に適用される理由がわからないことがあります。

H1 #register_title の上マージンを 0 にすることで、問題を解決できます。 

#register_title { margin-top: 0; }

常に reset.css 実装を使用することを忘れないでください。または、要素はデフォルトでスタイル設定されていることに注意してください。

編集:以前のすべての要素が完全に配置されていたため、これは問題であったことを指摘したいと思います。絶対配置をそのまま使用するべきではありません。要素をページの下に移動するには、margin-top、padding-top を使用する必要があります。絶対配置は、要素を配置する方法が他にない場合にのみ使用してください。

于 2012-04-12T22:29:31.120 に答える
0

javascript大きな違いの 1 つは、最初のページに、タイトルを最終的な位置に移動するタイトル アニメーションがあることです。登録ページにはそのようなロジックはありません。

于 2012-04-12T22:27:52.440 に答える
0

http://www.codecreek.biz/registration/registerでは、ロゴ (login_title) は絶対的な位置にありますが、他のページでは相対的です。

http://www.codecreek.biz/registration/registerで相対に設定すると、ギャップが修正されます。

(ちなみにhttp://www.codecreek.biz/loginでインラインでオーバーライドしているため、「top: 100」は有効になっていません。他のページにある場合)

于 2012-04-12T22:29:46.583 に答える