ChromeとIEのDIVマージン属性の違いについて

この記事では主に Chrome と IE の DIV マージン属性の違いを紹介します。必要な方は参考にしてください。

突然、Chrome でのレイアウトが非常にきれいになります。 IEでは混乱します。理由を知るために、いくつかのテストを行って、みんなに共有するために投稿しました

Chrome ではきれいに見えていたレイアウトが、IE では突然乱雑になってしまいました。その理由を調べるために、p のbackground-color プロパティを変更しました。最後に、IE と Chrome では同じ p の幅が異なることがわかりました。夜はとても怖いです！

その後、テストをしました。時期:

p1 
{ 
width:960px; 
margin:0px; 
padding:0px; 
}

現時点では、2 つのブラウザーに違いはありません。全体の幅は960pxです。

しかし、次の場合:

p1 
{ 
width:960px; 
margin:0px; 
padding:0px 10px 0px 10px; 
}

現時点では、Chrome は動作を停止します。実際には外側に 20 ピクセルのパディングを追加したため、p1 の合計幅は 960px+10px+10px=980px になりますが、IE での p1 の幅は依然として 960px です

私の考えによれば、パディングは次のようにする必要があると思います。幅に含まれています うわー、Chrome がここまで頑固だとは思いませんでした。
テスト後、ボーダーはパディングと同じになり、マージン値は「幅」の外側で計算されます。
また、float が設定されていない場合、Chrome は p1 を Position: 絶対値として扱い、IE はそれを Position: 相対値として扱います。そのため、このブロックレベル要素の float を left に設定するようにしてください。
ブラウザの互換性がないのは、素人の私にとってとても残念なことです。

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

CSS3での@keyframesアニメーションの実装

ボタンのテキストをクリックして入力ボックスになり、保存をクリックしてテキストの実装になります

モバイルWeb画面の適応(rem)についてはじめに

以上がChromeとIEのDIVマージン属性の違いについての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。