さまざまなブラウザに対応したJavaScriptで開発されたWebページを詳しく紹介します。-jsチュートリアル-php.cn

さまざまなブラウザに対応したJavaScriptで開発されたWebページを詳しく紹介します。

黄舟

リリース： 2017-10-03 06:00:32

オリジナル

1317 人が閲覧しました

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

前書き:

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

1. CSS HACK

現在、次の 2 つのメソッドでほぼすべての HACK を解決できます。

1、!重要

IE7 の !重要なサポートにより、!重要なメソッドは IE6 専用になりました。 HACKs .(書き方に注意。宣言位置は事前に明記しておく必要があるので注意)

<style>
#wrapper
{
width: 100px!important;
width: 80px;
}
</style>

ログイン後にコピー

2, IE6/IE77 for FireFox

*+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 の下で p にパディングを設定すると幅と高さが増加しますが、IE では増加しません。 !重要)

2. 中央揃えの問題。

1) 行の高さを現在の p と同じ高さに設定し、垂直方向に揃えます (折り返さないように注意してください)。

2). 水平方向に中央揃え。margin: 0 auto; (もちろん万能ではありません)

3、必要に応じて、a タグのコンテンツにスタイルを追加する必要があります。 (ナビゲーションタグ共通)

4. FFとIEのBOXの理解の違いにより2pxの差が生じ、floatに設定したpのマージンがIEでは2倍になる等の問題

5、 ul タグにはデフォルトでリストスタイルとパディングがあり、不必要なトラブルを避けるために事前に宣言するのが最善です (ナビゲーションタグとコンテンツリストで一般的)

6、外部ラッパーとして p を修正しないでください。高さの適応性を実現するには、オーバーフロー: 非表示を追加することをお勧めします。

7、ハンドカーソル: ポインタについては、IE にのみ適用されます。両方のことに時間を費やす価値はありません。

以上がさまざまなブラウザに対応したJavaScriptで開発されたWebページを詳しく紹介します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。