DIV+CSS Web ページのずれの原因への解決策_html/css_WEB-ITnose

連続して表示したいレイアウトがさまざまな理由でずれていることがよくあります。その結果、行の最後のボックスのレイアウトがずれて落ちてしまいます。下に）。

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

1. 幅の計算エラーの解決策 -

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

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

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

例:
1. IE6 は個別に認識されます (margin-left は IE6 のみ位置がずれています)
{margin-left:5px;_margin-left:2px}
IE6 を除く今回は他のブラウザは margin-left: 5px を設定し、IE6 は _margin-left: 2px を認識します

2. IE7 と IE6 の両方が margin-left を認識します (margin-left は、ie6 用の他のバージョンおよびブランドのブラウザを認識しません)およびie7）設定）
{margin-left:5px;*margin-left:2px;}
現時点では、IE6とIE7を除く他のブラウザではmargin-left:5px、IE6とIE7が設定されています。認識 *margin- left:2px

CSS HACK の知識をさらに知りたい場合は、CSS HACK 列に入力して関連知識をさらに学ぶことができます。

皆さんによくあるWebページのズレの原因をまとめたと思います。まずは上記の2つの側面からCSSレイアウトのWebページのズレの原因を確認していきましょう。