CSSが様々なブラウザに対応しているのは当たり前の話ですが、この記事では主に様々なブラウザに対応したJavaScriptで開発されたWebページの関連情報を紹介します。要約)このような機能を必要とする友人が全員をマスターできるようにしてください。
1. CSS HACK
現在、次の 2 つの方法でほぼすべての HACK を解決できます。
1、! important
IE7 の ! important サポートにより、! important メソッドは IE6 の HACK のみに使用できるようになりました。宣言された位置は事前に宣言する必要があることに注意してください。)
<style> #wrapper { width: 100px!important; width: 80px; } </style>
2、FireFox 用 IE6/IE77
*+html および *html は IE 固有のタグであり、Firefox ではまだサポートされていません. そして *+html は IE7 固有のタグです
<style> #wrapper { #wrapper { width: 120px; } *html #wrapper { width: 80px;} *+html #wrapper { width: 60px;} } </style>
注:
*+html 对IE7的HACK 必须保证HTML顶部有如下声明: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2. ユニバーサルフロートクロージャ (非常に重要!)
クリアフロートの原理については、を参照してください。 [構造マークアップを使用せずにフロートをクリアする方法]
次のコードをグローバル CSS に追加し、閉じる必要がある p に class="clearfix" を追加します
<style> .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix { display:inline-block; } .clearfix {display:block;} </style>
3。その他の互換性に関するヒント (再度)
1、FF パディングを p に設定すると幅と高さが増加しますが、IE では増加しません (!重要で解決できます)
2、センタリングの問題。 ). line-height を現在の p の高さと同じに設定し、vertical-align: middle を渡します (コンテンツを折り返さないように注意してください。)
2)。もちろん万能ではありません)
3. aタグ内のコンテンツにスタイルを追加する必要がある場合は、display:blockを設定する必要があります(ナビゲーションタグで共通)
4、BOXの理解の違いFF と IE の間では 2px の差が生じ、IE で float に設定された p のマージンが 2 倍になるなどの問題もあります。FF の下のラベルにはデフォルトでリスト形式とパディングが付いているのが最善です。不必要なトラブルを避けるために、事前に宣言してください (ナビゲーション ラベルとコンテンツ リストに共通)
7、カーソル: ポインターについては、IE のみに適用されます。
ご不明な点がございましたら、メッセージを残すか、このサイトのコミュニティにアクセスしてご連絡ください。お読みいただきありがとうございます。このサイトをご支援いただきありがとうございます。
以上がさまざまなブラウザと互換性のある JavaScript で開発された Web ページの詳細な例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。