ホームページ > 記事 > ウェブフロントエンド > さまざまなブラウザと互換性のある JavaScript で開発された Web ページの詳細な例

さまざまなブラウザと互換性のある JavaScript で開発された Web ページの詳細な例

小云云オリジナル: 2017-12-27 10:02:02989ブラウズ

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 の下のラベルにはデフォルトでリスト形式とパディングが付いているのが最善です。不必要なトラブルを避けるために、事前に宣言してください (ナビゲーションラベルとコンテンツリストに共通)

6. 高い適応性を実現するために、p に固定の高さを設定しないでください。

7、カーソル: ポインターについては、IE のみに適用されます。

追伸、IE5 とその他のブラウザについては、時間を費やす必要はありません。

ご不明な点がございましたら、メッセージを残すか、このサイトのコミュニティにアクセスしてご連絡ください。お読みいただきありがとうございます。このサイトをご支援いただきありがとうございます。

さまざまなブラウザと互換性のある JavaScript で開発された Web ページの詳細な例

関連記事