Webページをさまざまなブラウザに対応させるJavaScriptの詳細解説-jsチュートリアル-php.cn

Webページをさまざまなブラウザに対応させるJavaScriptの詳細解説

小云云

リリース： 2018-01-29 17:24:07

オリジナル

1667 人が閲覧しました

この記事では、さまざまなブラウザと互換性のある JavaScript 開発 Web ページに関する関連情報を主に紹介します。このような機能を習得するのに役立ついくつかの方法を紹介します。

前書き:

CSS がさまざまなブラウザーと互換性があることはよくあることですが、以下の内容はあまり目新しいものではなく、純粋に個人的な概要です。初心者向け。

1. CSS HACK

現在、ほぼすべての HACK を解決できるのは次の 2 つの方法です。

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. ユニバーサル float クロージャ (非常に重要!)

float クリアの原理については、[構造マークアップを使用せずに Float をクリアする方法] を参照してください。

必要に応じて、次のコードをグローバル 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 では幅と高さが増加しますが、IE では増加しません。(!重要)

2、中央揃えの問題。

1) と同じ高さに行の高さを設定します。現在の p を渡し、vertical-align: middle を渡します (コンテンツを折り返さないように注意してください。)
2) 必要に応じて、水平方向に中央揃えにします。 a タグのコンテンツにスタイルを追加するには、display: block; を設定する必要があります (ナビゲーションタグで一般的)

4、FF と IE の間の BOX の理解の違いは 2px の違いにつながり、次のような問題が発生します。 IE ではマージンを 2 倍にする p を設定します。

5、 ul タグにはデフォルトでリストスタイルとパディングがあり、不要なトラブルを避けるために事前に宣言するのが最善です。

6. 外部ラッパーとして、高さの適応性を実現するには、overflow: hidden を追加するのが最善です。 hand は IE にのみ適用されます。

追記 IE5 や他のブラウザについては、これに時間を費やす価値はありません。