ホームページ  >  記事  >  ウェブフロントエンド  >  div + css デザインで Web ページをさまざまなブラウザに対応させる方法_html/css_WEB-ITnose

div + css デザインで Web ページをさまざまなブラウザに対応させる方法_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 12:28:441445ブラウズ

CSS がさまざまなブラウザに対応していることは当たり前のことです。以下の内容は、まったく目新しいものではありません。
1. CSS HACK
現在、次の 2 つのメソッドでほぼすべての HACK を解決できます

1、! important

IE7 での ! important のサポートにより、! important メソッドは IE6 の HACK のみに使用できるようになりました (記述に注意してください。宣言位置は事前に指定する必要があります。)



注: IE7 用の
*+html HACK では、HTML の先頭に次のステートメントが必ず含まれるようにする必要があります:


2. ユニバーサルフロートクロージャ (非常に重要!)

フロートクリアの原理については、[構造マークアップなしでフロートをクリアする方法]を参照してください。

次のコードをグローバル CSS に追加し、閉じる必要がある div に class="clearfix" を追加します。



3. その他の互換性に関するヒント (またか? おっと)

1 , FF では、div にパディングを設定すると幅と高さが増加しますが、IE では増加しません (!重要で解決できます)
中央揃えの問題
1)。現在の div と同じ高さに設定し、vertical -align: middle を使用します。(コンテンツを折り返さないように注意してください。)
2) 水平方向に中央揃えにします。(もちろん全能ではありません)
3) . a タグ内のコンテンツにスタイルを追加する必要がある場合は、display: block; (ナビゲーション タグでよく見られます) を設定する必要があります。
4. FF と IE の間の BOX の理解の違いは 2px の違いにつながります。 IE で float に設定された div のマージンが 2 倍になるなどの問題もあります。 FF では、デフォルトで ul タグを宣言するのが最善です。ナビゲーションタグとコンテンツリストで共通)
6. 高さの適応性を実現するには、div の高さを設定しないでください。そして、手はIEにのみ適用されます

追伸、IE5および他のブラウザに関しては、これに時間を費やす価値はありません。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。