HTML Web ページがずれる原因と解決策

同じ行のレイアウトを設定する必要があることがよくありますが、さまざまな理由でずれることがあります。今日は、Web ページのレイアウトがずれる原因は 2 つあると考えられます。理由と解決策。

一列で表示するように設定したレイアウトが、さまざまな理由でずれてしまうことがよくあります。その結果、その行の最後のボックスのレイアウトがずれて外れてしまいます

。 DIV CSS Web ページのレイアウトがずれている おそらく 2 つの状況が考えられます。1 つは幅の計算エラーによって引き起こされ、もう 1 つは IE のバグ、特に IE6 と IE7 によって引き起こされます。次に、ズレの原因とズレを解消する方法をご紹介します。

幅計算エラー解決法

幅計算エラー、合計幅が500px、ボックスが3つあり、CSS幅がそれぞれ200px、200px、100pxの場合、ズレずに一列に表示されますが、追加した場合CSS ボーダー、padding、および margin 属性を使用する場合は、これらの属性が占める幅を忘れないでください。特に、パディングとボーダーが占める幅スペースを無視しないでください。左右の枠線が追加されたボックスがある場合、その時点で幅がちょうどよく、枠線が占める幅が2px減ったボックスが存在します。それ以外の場合は、3つのボックスの合計幅が大きくなります。全幅より大きくなり、ズレの原因となります。

幅の問題による CSS レイアウトのずれの概要:

ボックスの内側の幅の合計が外側の幅よりも大きいため、ずれが発生します。チェックする際は、設定された幅、border、padnd、margin の合計を計算する必要があります。 。

IEのバグ、特にIE6とIE7で位置ずれが発生する

この問題は最初の幅の問題を確認しましたが、現時点ではIE6とIE7では幅がずれています。 IE8 や その他 では、ブラウザでの位置ずれの問題はありません。このとき、margin 属性を使用するかどうかを考慮する必要があります。通常、CSS float (css float) を使用する場合は、margin (margin) を使用します。 -right margin-left特にここ) この属性) この属性は、現時点では、この問題を解決するために CSS ハックを使用する必要があります。 IE6 または IE7 が指定された余白スタイルのみを認識できるようにします。

例:

1. IE6は個別に識別されます(IE6のみmargin-leftがずれています)

{margin-left:5px;_margin-left:2px}

現時点では、IE6以外の他のブラウザでは異なる設定が行われますmargins -left:5px、IE6 単独で認識_margin-left:2px

2、IE7 と IE6 の両方で認識 (margin-left は、ie6 と ie7 の他のバージョンとブランド ブラウザを区別しません)

{margin-left:5px ; *margin-left:2px;}

現時点では、IE6 と IE7 を除く他のブラウザーは margin-left:5px を設定すると、IE6 と IE7 は *margin-left:2px を認識します

これらのケースを読んだ後、私は信じますさらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連書籍:

2D HTML と 3D HTML を変換する方法

HTML と xhtml の違いの詳細な説明

J スタイルを取得する一般的な方法を取得する

以上がHTML Web ページがずれる原因と解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。