標準レイアウトよくある悩みと解決策_体験交流

標準レイアウトを必要とする友人は、多くの場合、いくつかの問題に遭遇します。ここではレイアウトの問題をいくつか紹介します。

• CSS2.0 ボックス モデルの階層平面 回路図と 3D回路図

• 

• 3 ピクセルの問題と解決策

• 次の場合float コンテナを使用すると、IE6 では 3px の隙間が生じます。興味深いのは、右コンテナの高さが設定されていない場合、3px が右コンテナの内側にあり、高さを設定すると左側に移動することです。したがって、レイアウトの精度に高い要件がある場合は、例 29 と 31 の解決策を参照してください。

• 上のコンテナが浮いた後、下のコンテナも浮遊します。

• たとえば、上記の例のフッターは別の行を占有する必要がありますが、サイドバーがフローティングでコンテンツの高さがサイドバーの高さに合わせてフッターもサイドバーの右側に浮いてしまい、ページが混乱してしまいます。解決策は、メインコンテンツとフッターの間にコンテナを挿入し、スタイルを clear:both; height:0; font-size: 1px; line-height: 0px; に設定し、clear:both でクリアすると、ページが通常になります。 p>

• 子要素がフローティングで高さが不明な場合、親コンテナを子要素の高さに合わせるにはどうすればよいですか?

• この場合、2 つのスタイル属性 overflow:auto;zoom:1; を親ウィンドウに追加できます。overflow:auto; により、親コンテナが内部コンテナ. 高さ、ズーム:1; IE6 との互換性を保つために使用される CSS HACK です。 zoom:1; W3C 検証を通過できないのは残念ですが、幸いなことに IE は は IE 専用の別のスタイルで記述できるため、この属性は 、これは検証に合格するはずです。

• 相対配置と絶対配置

• ページでは、相対配置または絶対配置を使用する必要があることがよくありますが、ここにコツがあり、一度マスターすると、場所によっては面倒な JS が必要なくなります。つまり、親コンテナが相対配置を使用する場合、子要素は絶対配置を使用し、位置は親要素を基準にします。親要素が配置されていない場合、子要素の絶対位置はブラウザを基準とします。

• IE6 の二重マージンのバグ

• ページ内に連続したフロートが複数ある場合、例えばこのページのアイコン一覧では左フローティングを使用しており、左マージンの値をliに設定すると左端のマージンが2倍になります。たとえば、外側のマージンが 10 ピクセルに設定されているが、左側が 20 ピクセルと表示されている場合、解決策は、二重マージンのバグを回避するために、フローティング要素に display:inline; スタイルを追加することです。