ホームページ > ウェブフロントエンド > htmlチュートリアル > 【Webフロントエンド開発】ブラウザ互換処理事典_html/css_WEB-ITnose

【Webフロントエンド開発】ブラウザ互換処理事典_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:43:54
オリジナル
1519 人が閲覧しました

1. センタリングの問題

IE ではデフォルトで div 内のコンテンツが中央揃えになり、コードマージンを追加してみることができます: 0 auto;

2. 高さの問題
2 つ。上下に配置された div またはネストされた div では、div 内の実際のコンテンツが設定された高さよりも大きい場合、2 つの div はオーバーラップしますが、IE では、下の div が自動的に設定されます。したがって、レイヤーの重なりを避けるために、高さを適切に制御するか、単純に高さを書き込まずに自動的に調整する必要があります。この div のレベル要素は float であるため、 div ブロックの最後と閉じて閉じる前に、底がくぼんだ空の div を追加する必要があります。 対応する CSS は次のとおりです。 .float_bottom {clear:both;height:0px;font- size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;}

3. clear:both;

float の影響を受けたくない場合は、 div に clear:both;
を書き込みます 4. IE の float マージンによる Double distance

#box {
float:left;
width:100px;
margin:0 0 0 100px; // この場合、IE 200px の距離が生成されます
display:inline; // float を無視します
}

5. パディングの問題

FF でパディングを設定すると、div は高さと幅を増加させますが、IE は増加しません (* 標準の XHTML1.0定義 dtd は一貫しているようです) 高さを適切に制御するか、height:100%; width パディングの使用を減らしてみますが、実際の経験に基づくと、一般に FF と IE のパディングは実際にはそれほど変わりません。 div の幅 = 幅 + パディングなので、div は幅で埋められ、幅は実際に必要な幅からパディングを引いた値で定義されます。

6. div がネストされている場合の y 軸のパディングとマーラインの問題

FF では、y 軸上の子 div から親 div までの距離は親のパディング + 子のマーラインです
IE では、 y軸の子divから親divまでの距離は、親のpaddingと子のmarginの大きい方
FFでy軸の親のpadding=0、border=0のとき、子divから親divまでの距離親 div は 0 で、子の margin は親 div の外側で動作します

7. パディング、マージン、高さ、幅に対する確実な解決策です

これはメソッドではなくスキルであることに注意してください:
標準ヘッダーを記述します。まあ

< ;html xmlns=”http://www.w3.org/1999/xhtml”>
可能な限りパディングを使用し、マージンを慎重に使用してください。親の高さが固定されている場合は、高さを 100% で埋めるようにしてください。値を変更する場合、子の高さは 100% である必要はありません。子がすべて浮動している場合は、下の空のスペースを埋めます。実際の幅は、可能な限り余白を使用する必要があります。パディングを減算し​​ます

8. リストクラス

1. FF ではデフォルトで ul タグにパディング値がありますが、IE ではマージンのみが値を持ちます
まず ul {margin:0;padding:0;} を定義します。 2 . ul および ol リストのインデントの問題。ul、ol およびその他のリストのインデントを削除する場合、スタイルは次のように記述する必要があります: {list-style:none;margin:0px;padding:0px;}

9. class (display:block, inline)

1. 2 つの要素、display:block と inline
display:block; // インライン要素をブロック要素としてシミュレートできます
display:inline; // 同じように配置された効果を実現します。 row
display:table; / /FF では、table
display:block ブロック要素の効果をシミュレートします。要素の特性は次のとおりです:
常に新しい行で始まり、行の高さと上下の余白を制御できます。 ; 幅を設定しない限り、デフォルトの幅はコンテナの 100% になります

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