CSS レイアウト Web ブラウザーの互換性の問題を HACK なしで迅速に解決

CSS レイアウトではブラウザの互換性が常に一般的な問題であり、そのために初心者は多くの誤解に遭遇しました。そこで、私の経験を通じて、ブラウザの互換性の問題のほとんどを回避する 2 つの方法をまとめました。

これら 2 つの方法には次の利点があります。

1. HACKを使用する必要はありません

2. ひと目でわかるシンプルかつ効果的

3. 階層型およびモジュール型レイアウト

4. コードがより合理的で識別しやすくなりました。

方法 1: 内部および外部スペースの追加によって発生するフローティングの位置ずれを解決する

通常、複数列レイアウトで DIV を浮動表示するには、float を使用する必要があります。通常、3 列レイアウトの場合は 3 つの DIV を記述します。

この効果を実現するには、列に直接間隔をあけられるようにマージンを追加し、境界線とパディングを追加して、内部のテキストが境界線にくっつかないようにします。しかし、コードを書いた後、予期せぬことが起こりました。

3 番目の列はその下を走行しました。 これはあなたが望んでいる効果ではありません。それでは、それを分析してみましょう。一般的な考え方に従ってください。全体の幅は 800 ピクセル、左の列は 200 ピクセル、中央の列は 400 ピクセル、右の列は 200 ピクセルです。これは適切に見えますが、これらの列の間に隙間が必要なので、変更する必要があります。左の列、中央の列は 400px、右の列は 190px でよろしいでしょうか？

ただし、見栄えを良くするには、境界線を追加します。しかし、枠線の幅も増加することを忘れていました: 10px; 混乱しているので、実際の幅は次のようになります: 左の列: 幅 200-外側の間隔 10-内側の間隔 20-ボーダー。 2=168 なので、ズレは生じません。でも、これはちょっと複雑だと思いませんか？電卓が必要かもしれません。このレイアウトでは一部のブラウザでは表示に差異が生じます。

さて、私の方法について話しましょう。階層分けに応じてレイアウトと表示を分けます。 このレイアウトでは、幅とフロートに加えて、最大でも外側のスペースが追加されるため、計算が容易になります。次に、境界線、内部および外部の間隔などを表示するための別の DIV をレイアウト列に追加します。幅を定義する必要はなく、調整するだけです。覚えやすくするために、私は即興で詩を作りました。固定幅は固定幅で、境界線やパッチはなく、中に DIV を入れると、定義されたスタイルが機能します。

方法 2: 内側の浮遊要素が外側の層から切り離される問題を解決する

製品カタログや写真アルバムを作成するために、UL または N DIV を使用してフローティングを行います。目的の効果は次のとおりです。

しかしそれが裏目に出て、最近は以下のような表示になり、外枠が上に移動してしまいました。

この問題の解決策は実際には非常に簡単です。

1. この問題を解決するには、float:left; を外側の層に追加します。

2. もう 1 つの方法は、フロートの終了後にフロートをクリアするために最後に DIV を配置することです。

3. 外側のレイヤーに高さまたは幅を追加します。