ホームページ > 記事 > ウェブフロントエンド > ブラウザごとのパディングとマージンの違い_体験交流
マージンとパディングはいつでも使用できますが、発生した問題を解決するにはどうすればよいでしょうか?ブラウザーはコンテナーの幅をさまざまな方法で解釈するため、
IE 6.0 Firefox Opera などは
実際の幅=幅+パディング+ボーダー+マージン
IE5.X
実際の幅=width-padding-border-margin
解決策は次のとおりです:
div.content {
width:400px; //これは間違った幅です。すべてのブラウザで読み取られます。
voice-family: ""}""; //IE5.X/win はこれを無視します。 ""}""
voice-family:inherit;
width:300px; //IE6/win を含む一部のブラウザはこの文を読み取り、新しい値 (300px) で上書きされます。 Old
}
html> ;body .content { //html>body は CSS2 で書かれています
width:300px; //CSS2 (IE5 ではありません) をサポートしているブラウザは幸運にもこの文を読むことができます
}
div.content {
width:300px ! important; //これは正しい幅です。! important タグをサポートするほとんどのブラウザでは、ここで値
width (space)/**/:400px を使用します。 //IE6/win はこの文を解析しないため、IE5.X/win がこの文を読み取る間、IE6/win は幅の値が 300px であるとみなします。!重要なため、新しい値 (400px) が古い値を上書きします。 tag それは彼らにとっては機能しません
}
html>body .content { //html>body は CSS2 で書かれています
width:300px; //CSS2 をサポートしているブラウザは幸運にもこの文を読むことができます。
}