ホームページ > ウェブフロントエンド > CSSチュートリアル > ブラウザごとのパディングとマージンの違い_体験交流

ブラウザごとのパディングとマージンの違い_体験交流

WBOY
リリース: 2016-05-16 12:09:08
オリジナル
1914 人が閲覧しました

マージンとパディングはいつでも使用できますが、発生した問題を解決するにはどうすればよいでしょうか?ブラウザーはコンテナーの幅をさまざまな方法で解釈するため、
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 をサポートしているブラウザは幸運にもこの文を読むことができます。
}


ブラウザごとのパディングとマージンの違い_体験交流小さい
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート