中央揃えレイアウトとIE二重余白バグ_CSS/HTMLについて

今日、CSS 中心のレイアウトの問題について Google で検索したところ、結果はほぼすべて同じ記事を引用していました。 IE で中央揃えにするには、 要素で text-align:center; 属性を定義するだけです。 Firefox では、ラッパーを定義する必要があります。次に、margin-left:auto;margin-right:auto; プロパティを指定して、Firefox でブロックを中央に配置します。実際、私自身も margin:auto; の略である margin 属性を使用して中心を設定しています。余白省略属性は、時計回りに上、右、下、左の 4 方向のページ余白を設定します。これに基づいて、 margin-top:auto 属性を設定した後にブロックを中央に配置したいだけだと考えるのは間違いであることに注意してください。この方法を使用する場合、中央揃えになるように margin-left:auto;margin-right:auto; 属性を同時に設定する必要があります。ただし、margin: 0 auto; を設定して中央に配置することもできます。
中央に配置する別の方法は、絶対配置を使用することを前提として、 left: 50% + margin-left: -375px; の組み合わせを使用することです。センタリングの方法は次の 2 つがあります。

コードをコピー コードは次のとおりです:

/* 方法 1 */
body {
背景: #00FF7F;
text-align: center; /* ie center alignlayout のハック */
}
#wrapper{
背景: アクア; 750px;
margin:auto; /* または margin-left:auto;margin-right:auto;*/
}
/* メソッド 2 */
#wrapper2 {
位置:絶対;
幅: 750px;
左: 50%;
背景: オレンジ;私は個人的に、常に方法 1 を使用して中央に配置します。方法 2 のブロックには必要な剛性が欠けており、コードが理解しにくいと感じるからです。方法 2 のフォームを一定の限界まで縮小すると、全体のレイアウトが流れるようになります。もちろん、この効果を求める人もいます。 :)、方法 2 のもう 1 つの利点は、ほとんどのテキストが左揃えのままであるため、他のネストされたブロックの body 要素の text-align: center; 設定をオーバーライドする必要がないことです。これにより、冗長性をある程度削減できます。しかし、このメリットは微々たるものだと思います。要するに、誰もが自分の好みに応じて必要なものを摂取しているだけです。

もう 1 つは、IE の二重マージンのバグです。解決策は、display:inline; 設定を追加することです。実際、この解析エラーのバグは多くの側面に影響を及ぼします。 IE の CSS レイアウトで異常な間隔が発生した場合は、display:inline; の属性宣言を追加してみてください。また、特定のレイアウトの問題については、display:block; と display:inline; を組み合わせて使用​​して、希望どおりのレイアウトを作成する必要があります。私は、順序付けリストによって制御される画像メニューでも同様の問題に遭遇しました。

早速ですが、さまざまなブラウザに CSS のバグがありますが、CSS ページのレイアウト方法は今日まで発展しており、比較的成熟しています。バグのせいで混乱する可能性はもう高くありません。質問がある場合は、検索エンジンをチェックすると、ほとんどの問題が解決されます。空き時間にいくつかの実験を行うことができれば、緊急時に冷静でいられるかもしれません。