CSS XTHML の記述標準とよくある問題の概要 (ページ最適化)

プロジェクトドキュメントディレクトリ
Div+CSS 命名規則 - 4 -
Div+css 命名規則 - 4 -
1.1. div+css 命名規則 - 4 -
1.2. CSS ID 命名規則 - 4 -
1.3. CSSスタイルファイルの命名 - 5 -
XHTMLコーディング基本仕様 - 6 -
XHTMLコーディング基本仕様 - 6 -
推奨されるウェブページデザイン標準 - 10 -
推奨されるウェブページデザイン標準 - 10 -
一般的な CSS 最適化テクニック - 11 -
CSSブラウザ互換性問題の概要 - 20 -
JavaScript ブラウザ互換性の概要 - 30 -
XHTML 標準 DIV+CSS レイアウトがウェブサイト SEO に与える影響 - 35 -

Div+CSS 命名規則
Div+css 命名規則
CSS 名は大文字と小文字が区別されるため、すべて小文字を使用することをお勧めします。以下に、最適な命名ガイドラインをまとめます。適切な命名は、メンテナーにとって読みやすいだけでなく、検索エンジン最適化 (SEO) にも大きなメリットがあります。その中でも、コードの最適化は重要なステップです。 SEO 標準にさらに準拠するために、現在普及している CSS+DIV 命名規則を以下に示します (いくつか追加されています)。
1.1. div+css 命名規則ヘッダー:header
ログインバー: loginBar
ロゴ：
サイドバー: サイドバー
広告: バナー
ナビゲーション: nav
サブナビゲーション: subNav
メニュー:メニュー
サブメニュー: サブメニュー
検索:検索
スクロール: スクロール
ページ本体:メイン
コンテンツ：
タブ:タブ
記事リスト:リスト
プロンプトメッセージ: msg
ヒント:
列タイトル: タイトル
友達リンク:
フッター:フッター
参加する: joinus
ガイド:ギルド
サービス：
ホットスポット:ホット
ニュース: ニュース
ダウンロード:ダウンロード
登録: regsiter
ステータス: ステータス
ボタン:btn
投票:投票
パートナー:パートナー
著作権:copyRightProduct Management

1.2. CSS ID命名規則

ジャケット：ラップ
メインナビゲーション: mainNav
サブナビゲーション: サブナビゲーション
フッター:フッター
ページ全体: コンテンツ
ヘッダー:ヘッダー
フッター:フッター
商標: ラベル
タイトル: タイトル
メインナビゲーション: mainNav(globalNav)
トップナビゲーション: topnav
サイドナビゲーション: サイドバー
左ナビゲーション: leftsideBar
右ナビゲーション: rightsideBar
旗:ロゴ
スローガン: バナー
メニューコンテンツ1:menu1Content
メニュー容量: menuContainer
サブメニュー:サブメニュー
サイドナビゲーションアイコン: sidebarIcon
注記：
BreadCrumbs: ブレッドクラム（ページ位置のナビゲーションヒント）
コンテナ:コンテナ
コンテンツ：
検索:検索
ログイン: ログイン
機能領域: ショップ（ショッピングカート、レジなど）
現在: 現在

1.3. CSS スタイルファイルの命名 main: master.css
レイアウト: layout.css
列: columns.css
テキスト: font.css
印刷スタイル: print.css
テーマ:themes.css
一般: basic.css

上記の命名規則は非常に直感的です。プログラマーがコメントを追加しなくても、それが何を意味するのか明確にわかります。上記の命名により、頻繁に使用されるスタイルのほぼすべてが網羅されます。

XHTMLコーディングの基本仕様

XHTMLコーディングの基本仕様
2.1 すべてのタグには対応する終了タグが必要です。XHTML では厳密な構造が要求されるため、すべてのタグを閉じる必要があります。ペアになっていない単一のタグの場合は、タグの末尾に「/」を追加してタグを閉じます。例えば：
<img height="80" alt="Web デザイナー" src="/uploadfile/200806/17/8C162625950.gif" width="200" />

2.2 タグのすべての要素と属性の名前は小文字にする必要があります。HTML とは異なり、XHTML では大文字と小文字が区別されます。<title> と <TITLE> は異なるタグです。 XHTML では、すべてのタグ名と属性名を小文字にする必要があります。たとえば、<BODY> は <body> と記述する必要があります。大文字と小文字の混在も許可されません。

2.3 すべての XHTML タグは適切にネストされている必要があります。また、XHTML は厳密な構造を必要とするため、すべてのネストは順序どおりに行う必要があります。以前は、次のようなコードを記述していました。
<p><b></p>/b> を次のように変更する必要があります: <p><b></b>/p>
つまり、ネストレイヤーは厳密に対称である必要があります。

2.4 すべての属性は引用符 "" で囲む必要があります。HTML では属性値を引用符で囲む必要はありませんが、XHTML では引用符で囲む必要があります。例えば：
<height=80> を次のように変更する必要があります: <height="80">
特別な場合には、属性値に二重引用符を使用する必要があります。" または一重引用符 ( ' ) を使用できます。例:
<alt="こんにちは" と言ってください">

2.5 すべての < および & 特殊文字をエンコードするタグの一部ではない小なり記号 (<) は、< としてエンコードする必要があります。
タグの一部ではない大なり記号 (>) は、> としてエンコードする必要があります。
エンティティの一部ではないアンパサンド (&) は & としてエンコードする必要があります。

2.6 すべての属性に値を割り当てる
XHTML では、すべての属性に値が必要であり、値のない属性は繰り返す必要があると規定されています。例えば：
<td nowrap> <input type="checkbox" name="shirt" value="medium" チェック済み>
次のように変更する必要があります:
<td nowrap="nowrap"> <input type="checkbox" name="shirt" value="medium" selected="checked">

2.7 コメントに「–」を使用しない
「–」は XHTML コメントの先頭と末尾にのみ出現します。つまり、コンテンツ内では有効ではなくなります。たとえば、次のコードは無効です。
<!–ここにコメント———–ここにコメント–>
内部のダッシュを等号またはスペースに置き換えます。
<!–ここにコメント=============ここにコメント–>
上記の仕様の一部は奇妙に思えるかもしれませんが、これらはすべて、将来のデータの再利用を容易にするために、コードに統一された独自の標準を持たせるためのものです。

2.8 スタイルやスクリプト言語を参照する場合、type属性は省略できません。
<script language="javascript" type="text/javascript">
注意: type="text/javascript" は省略できません。

2.9 ページに JavaScript メソッドを記述するときは、必ずコメント記号を追加してください。これにより、>、<、&& などの特殊記号によって発生するエラーを回避できます。
<script> タグと <style> タグの内容は、CDATA セクションで囲む必要があります。
例えば：
<script type="text/javascript">
<![CDATA[
関数 func(a, b)
{
もし (a < b)
true を返します。
}
]]> </スクリプト>
上記のスクリプトには小なり記号 (<) があることに注意してください。これが CDATA セクションに囲まれていない場合、小なり記号 (<) とそれに続くコンテンツが別の XHTML タグの開始と誤認され、不要なエラーが発生します。
IEは<script>タグ内のCDATAセクションを不正とみなし、スクリプトエラーを引き起こすことに注意してください。この問題は、次の方法で解決できます。
避けるべき JavaScript コメント:
<script type="text/javascript">
/* <![CDATA[ */
関数 func(a, b)
{
もし (a < b)
true を返します。
}
/* ]]> */
</スクリプト>
または
<script type="text/javascript">
// <![CDATA[
関数 func(a, b)
{
もし (a < b)
true を返します。
}
// ]]>
</スクリプト>
もちろん、最善の方法は、スクリプトと CSS を別々のファイルに配置し、XHTML ページで参照することです。

2.10 すべてのスタイルを style 内に配置します。例: <td width="4"> </td> これは標準に準拠していません。
次のように記述します: <td style=”width:4px;”> </td>

2.11 最後のスタイル属性の後にはセミコロンが必要です

2.12 name 属性の代わりに id 属性を使用します。
HTML では、name 属性を使用して <a>、<applet>、<form>、<frame>、<iframe>、<img>、<map> タグを識別できます。 XHTML 1.0 Strict および XHTML 1.1 標準では、name 属性のサポートが削除されました。ページ上の要素を一意に識別するには、 id を使用する必要があります。 IDは重複できません。

2.13 属性値内のスペースの処理。
属性値の先頭と末尾の空白は無視されます。属性値内の単語間の複数のスペースまたは改行は、単一のスペースとして扱われます。たとえば、次の 2 つの属性は同じ値を持ちます。
<input value="HTML が出力されました" />
<input value=" HTMLは
アウト " />

2.14 適切な文書型宣言と名前空間を使用します。

2.15 meta 要素を使用してコンテンツタイプを宣言します。

2.16 img を使用する場合は、空白のままにできる alt 属性を追加します。

2.17 img を使用する場合、align=absmiddle 属性は W3C 検証に失敗します。ご存知のとおり、画像とテキストを中央に垂直に揃えたい場合は、IMG タグに align=absmiddle 属性を追加できます。ただし、align=absmiddle 属性は W3C 検証に失敗します [検証アドレスについては、W3C ウェブページ標準検証サービスアドレスを確認してください]。では、CSS を使用して IMG の align=absmiddle 属性を置き換え、垂直中央揃えを実現できるでしょうか。答えは「はい」です。
これはCSSにvertical-align:middle;を追加することで実現できます。

場合：
<div><img style="vertical-align:middle;" src="/uploadfile/png/IconBuffet/Redmond/close_32.png" />CSS を使用して画像とテキストを垂直方向に中央揃えします</div><br /><br />
<div><img src="/uploadfile/png/IconBuffet/Redmond/close_32.png" />これはスタイルを追加しない効果です</div><br /><br />
<div><img align=absmiddle src="/uploadfile/png/IconBuffet/Redmond/close_32.png" />これは、align=absmiddle を使用して画像とテキストを垂直に配置します</div>

2.18 非推奨の属性とタグは推奨されません。Web サイトの互換性の問題をより適切に処理するために、非推奨のタグと属性を使用しないことをお勧めします。

2.19 VS2005 検証標準を XHTML1.0 以上に調整する

述べる：
XHTML 1.0 移行 WEB 標準の問題かつては人気があった HTML マークアップ言語は公式には廃止されたとみなされ、その後継は XHTML (http://www.w3.org/MarkUp/) です。ウェブサイトがより厳格な XHTML ルールに従って作成されている場合、ウェブサイトはさまざまなブラウザで一貫したスタイルを維持します。また、今後のブラウザのアップグレードでも、Web サイトの外観は一貫したままであると想定できます。また、ブラウザ、デバイス、プラットフォーム間で一貫したサポートも受けられます。
XHTML には 2 つの主な目的があります。
ドキュメントの構造（XHTML マークアップ言語を使用）とプレゼンテーション（CSS を使用）を分離する
· HTML を XML として記述する最初の目標として、W3C は <font> や bgcolor などの一部の HTML タグと属性を削除しました。これらのタグや属性はドキュメント構造の一部ではなく、ドキュメントの表示方法を記述するためにのみ使用されるため、HTML ではなく CSS ファイルで定義する必要があります。同様に、特定のタグ付けされたコンテンツは、必ずしも特定の方法で表示する必要はありません。たとえば、CSS の定義によっては、<h1> タグ内のコンテンツのフォントサイズが <p> タグ内のコンテンツよりも小さくなる場合があります。もちろん、<h1> は一般的に文書のタイトル情報を表示するために使用されます。その重要度は一般に <p> の内容よりも高いため、ほとんどのブラウザでは大きなフォントサイズで表示されます。
2 番目の目標として、XHTML は XML の厳密な構文に厳密に準拠します。 XHTML は、HTML を XML 構文に従って再構築した結果であると言えます。つまり、XHTML ドキュメントを作成する場合、実際には特殊な XML ドキュメントを作成していることになります。 XML ドキュメントの構文は HTML よりもはるかに厳密ですが、これについてはこの記事の後半で説明します。
XHTML には 3 つのバージョンがあります。
XHTML 1.0 移行
XHTML 1.0 厳密
XHTML 1.0 フレームセット
XHTML 1.0 Transitional には、HTML 4.01 のすべてのタグと属性が含まれています。これは、それほど厳密ではない XHTML です。その目的は、既存の HTML 開発者が XHTML を受け入れて使用しやすくすることです。
XHTML 1.0 Strict は XHTML の厳密なバージョンです。開発者は、ドキュメントの構造と表示を分離するというルールを厳守する必要があります。つまり、<font> や bgcolor などのタグや属性を使用する代わりに、CSS を使用してページの表示を制御する必要があります。
XHTML 1.0 フレームセットは、ドキュメントを複数のフレームに分割して異なるコンテンツを表示するために使用されます。 (XHTML 1.0 Transitional および Strict ページには <frameset> タグを含めることはできません)。
ここでは XHTML について詳しく説明しません。興味がある場合は、Google や MSN 検索を使用して、多くの関連情報や詳細な紹介を見つけることができます。この投稿の下にコメントや質問を残して、一緒に議論しましょう。以下は、XHTML を記述するための基本的なルールです。
参考URL: http://www.cnblogs.com/plain-heart/archive/2008/04/17/1158909.html
http://www.chinaz.com/Design/Pages/10091JN2007.html

推奨されるウェブページデザイン標準

推奨されるウェブページデザイン標準
3.1 命名規則

ファイル名の命名原則:
最も理解しやすい意味を実現するために、最小限の文字を使用します。

一般的なファイルとディレクトリの命名規則:
各ディレクトリには、index.htm というファイル名のデフォルトの HTML ファイルが含まれている必要があります。ファイル名には、小文字の英語の文字、数字、アンダースコアの組み合わせを使用し、可能な限り英語の単語から翻訳する必要があります。たとえば、feedback (フィードバック)、aboutus (会社概要) などです。同じ種類のファイルが複数ある場合は、英語の文字と数字で名前が付けられ、文字と数字は _ で区切られます。たとえば、news_01.htm などです。桁数はファイル数に比例し、不足する桁には 0 が埋め込まれることに注意してください。たとえば、ニュース項目が 200 件あり、18 番目の項目の名前が news_018.htm であるとします。
画像の命名規則:
名前は、アンダースコアで区切られた最初と最後の 2 つの部分に分かれています。
ヘッダー部分は、この画像の一般的な性質を示します。たとえば、ページ上部に配置される広告や装飾模様などの長方形の画像には「バナー」という名前を付けます。象徴的な画像には「ロゴ」という名前を付けます。ページ上に固定されていないリンク付きの小さな画像には「ボタン」という名前を付けます。ページ上の特定の位置に連続して表示され、同じ性質を持つリンク列の画像には「メニュー」という名前を付けます。装飾的な写真には「写真」という名前を付けます。タイトルを表すリンクのない画像には「タイトル」という名前を付けます。末尾の部分は絵の具体的な意味を示すために使われ、英語の文字で表現されます。たとえば、banner_sohu.gif、banner_sina.gif、menu_aboutus.gif、menu_job.gif、title_news.gif、logo_police.gif、logo_national.gif、pic_people.jpg、pic_hill.jpg などです。
オンマウス効果のある画像の場合、2 つの画像の名前は、元のファイル名の末尾に「_on」と「_off」を追加して付けられます。
その他のファイル命名規則:
js の命名原則は、関数に英語の単語を使用することです。たとえば、広告バナーの js ファイル名は ad.js です。
すべての CGI ファイルには cgi という接尾辞が付きます。すべてのCGIプログラムの設定ファイルはconfig.cgiです。

3.2 ディレクトリ構造の仕様ディレクトリ構築の原則は、最小の数のレベルで最も明確で単純なアクセス構造を提供することです。
ディレクトリ名は小文字の英語の文字とアンダースコアで構成されます。 (命名規則を参照)
ルートディレクトリには通常、index.htm とその他の必要なシステムファイルのみが格納されます。各主要列には、対応する独立したディレクトリがあります。ルートディレクトリの下の images ディレクトリは、すべてのページで使用されるパブリックイメージを格納するために使用され、サブディレクトリの下の images ディレクトリは、この列のページで使用されるプライベートイメージを格納するために使用されます。すべての JS スクリプトは、ルートディレクトリの下の scripts ディレクトリに格納されます。すべての CSS ファイルは、ルートディレクトリの下の App_theme ディレクトリに格納されます。すべての flash、avi、ram、quicktime などのマルチメディアファイルは、ルートディレクトリの下の media ディレクトリに格納されます。

一般的なCSS最適化テクニック
一般的なCSS最適化テクニック
4.1. CSS の省略形を使用する省略形を使用すると、CSS ファイルのサイズが小さくなり、読みやすくなります。 CSS 省略形の主なルールについては、「一般的な CSS 省略形構文の概要」を参照してください。ここでは詳しく説明しません。
参考ウェブサイト: http://homepage.yesky.com/97/7643097.shtml

4.2. 値が0でない限り、単位を明示的に定義する
寸法の単位を定義し忘れることは、CSS 初心者がよく犯す間違いです。 HTML では width=100 と書くだけですが、CSS では width:100px width:100em のように正確な単位を指定する必要があります。単位を未定義のままにできる例外は、行の高さとゼロ値の 2 つだけです。これ以外、他のすべての値の後には単位を付ける必要があります。値と単位の間にスペースを入れないように注意してください。
4.3. 大文字と小文字の区別 XHTML で CSS を使用する場合、CSS で定義された要素名は大文字と小文字が区別されます。このエラーを回避するには、すべての定義名に小文字を使用することをお勧めします。
HTML と XHTML では、class と id の値も大文字と小文字が区別されます。大文字と小文字を混在させて使用する必要がある場合は、CSS 定義が XHTML のタグと一致していることを確認してください。
4.4. クラスと ID の前の要素制限を解除する要素にクラスまたは ID を定義すると、ID はページ内で一意であり、クラスはページ内で複数回使用できるため、先行する要素制限を省略できます。特定の要素に自分自身を制限しても意味がありません。例えば：
div#content { /* 宣言 */ }
fieldset.details { /* 宣言 */ }
次のように書くことができる
#content { /* 宣言 */ }
.details { /* 宣言 */ }
これにより、バイトがいくらか節約されます。
4.5. デフォルト値通常、padding のデフォルト値は 0 で、background-color のデフォルト値は transparent です。ただし、デフォルト値はブラウザによって異なる場合があります。競合が心配な場合は、次のようにスタイルシートの先頭ですべての要素のマージンとパディングの値を 0 に定義できます。
* {
マージン:0;
パディング:0;
}

4.6. 継承された値を再定義する必要はない
CSS では、子要素は色やフォントなど、親要素の属性値を自動的に継承します。親要素で定義されたものは、繰り返し定義する必要なく、子要素に直接継承できます。ただし、ブラウザが定義をデフォルト値で上書きする可能性があることに注意してください。
4.7. 最も近い優先順位の原則同じ要素の定義が複数ある場合、最も近い（最も小さいレベルの）定義が優先されます。たとえば、次のようなコードがあります。
更新: Lorem ipsum dolor セット
CSSファイルでは、要素pとクラスupdateを定義しています。
ｐ {
マージン:1em 0;
フォントサイズ:1em;
色:#333;
}
。アップデート {
フォントの太さ:太字;
色:#600;
}
これら 2 つの定義のうち、class は p よりも新しいため、class=update が使用されます。詳細については、W3C のセレクターの詳細度の計算を参照してください。
4.8. 複数のクラス定義タグは同時に複数のクラスを定義できます。たとえば、最初に 2 つのスタイルを定義します。最初のスタイルの背景は #666 で、2 番目のスタイルには 10 px の境界線があります。
.one{幅:200px;背景:#666;}
.two{境界線:10px 実線 #F00;}
ページコードでは、
<div class="1 2"></div>
最終的な表示効果は、この div に #666 の背景と 10 ピクセルの境界線の両方が含まれることです。はい、可能ですので、お試しください。
4.9. 子孫セレクターの使用
CSS 初心者の作業が遅くなる原因の 1 つは、子セレクターの使い方を知らないことです。子セレクターを使用すると、多くのクラス定義を保存できます。次のコードを見てみましょう。
<div id=サブナビゲーション>
<ul>
<li class=subnavitem> <a href=# class=subnavitem>項目 1</a></li>>
<li class=subnavitemselected> <a href=# class=subnavitemselected> アイテム 1</a> </li>
<li class=subnavitem> <a href=# class=subnavitem> 項目 1</a> </li>
</ul>
</div>
このコードの CSS 定義は次のとおりです。
div#subnav ul { /* いくつかのスタイル */ }
div#subnav ul li.subnavitem { /* いくつかのスタイル */ }
div#subnav ul li.subnavitem a.subnavitem { /* いくつかのスタイル */ }
div#subnav ul li.subnavitemselected { /* いくつかのスタイル */ }
div#subnav ul li.subnavitemselected a.subnavitemselected { /* いくつかのスタイル */ }
上記のコードを次のコードに置き換えることができます
<ul id=サブナビ>
<li> <a href=#> 項目 1</a> </li>
<li class=sel> <a href=#> 項目 1</a> </li>
<li> <a href=#> 項目 1</a> </li>
</ul>
スタイルの定義は次のとおりです。
#subnav { /* いくつかのスタイル */ }
#subnav li { /* いくつかのスタイル */ }
#subnav a { /* いくつかのスタイル */ }
#subnav .sel { /* いくつかのスタイル */ }
#subnav .sel a { /* いくつかのスタイル */ }
子セレクターを使用すると、コードと CSS がより簡潔になり、読みやすくなります。

4.10. 背景画像のパスを引用符で囲む必要はありません。引用符は不要なので、バイト数を節約するために、背景画像のパスを引用符で囲まないことをお勧めします。例えば：
背景:url(images/***.gif) #333;
次のように書くことができる。
背景:url(images/***.gif) #333;
引用符を追加すると、一部のブラウザでエラーが発生します。
4.11. グループセレクター
一部の要素タイプ、クラス、または ID に共通の属性がある場合は、グループセレクターを使用して定義の繰り返しを回避できます。これにより、かなりのバイト数を節約できます。
たとえば、すべてのタイトルのフォント、色、余白を定義するには、次のように記述します。
h1、h2、h3、h4、h5、h6 {
フォントファミリー:Lucida Grande、Lucida、Arial、Helvetica、sans-serif;
色:#333;
マージン:1em 0;
}
使用中に個々の要素に独立したスタイルを定義する必要がある場合は、新しい定義を追加して古い定義を上書きできます。例:
h1 { フォントサイズ:2em; }
h2 { フォントサイズ:1.6em; }
4.12. リンクスタイルを正しい順序で指定する CSS を使用してリンクの複数の状態スタイルを定義する場合は、記述順序に注意してください。正しい順序は、:link :visited :hover :active です。最初に引かれた文字は LVHA です。これは LoVe HAte (like hate) として覚えることができます。なぜこの定義なのかの詳細については、Eric Meyer の「Link Specificity」を参照してください。
ユーザーがキーボードを使用して制御する必要があり、現在のリンクのフォーカスを知る必要がある場合は、:focus 属性を定義することもできます。 :focus 属性の効果は、記述する場所によっても異なります。フォーカスされた要素に :hover 効果を表示したい場合は、:focus を :hover の前に記述します。フォーカス効果で :hover 効果を置き換えたい場合は、:focus を :hover の後に記述します。
4.13. フロートのクリア非常に一般的な CSS の問題は、フロートを使用して配置するときに、下にあるレイヤーがフロートされたレイヤーによって覆われたり、レイヤー内のネストされたサブレイヤーが外側のレイヤーの範囲を超えたりすることです。
通常の解決策は、div や br などの要素を float の後に追加し、そのスタイルを clear: both として定義することです。
4.14. 水平方向の中央揃え
これは簡単なヒントですが、初心者から次のような質問が多く寄せられるので、繰り返しておく価値があります。「CSS で何かを水平方向に中央揃えするにはどうすればよいですか?」次のように、要素の幅を定義し、レイアウトがレイヤー (コンテナー) に含まれている場合は水平方向の余白を定義する必要があります。

次のように水平方向に中央揃えするように定義できます。
＃包む {
width:760px; /*レイヤーの幅を変更します*/
マージン:0 自動;
}
ただし、IE5/Win ではこの定義を正しく表示できません。これを解決するために、text-align 属性を使用するという非常に便利なトリックを使用します。このような：
体 {
テキスト配置:中央;
}
＃包む {
width:760px; /*レイヤーの幅を変更します*/
マージン:0 自動;
テキスト配置:左;
}
最初の body text-align:center; ルールは、IE5/Win で body のすべての要素が中央揃えになることを定義します (他のブラウザではテキストのみが中央揃えになります)。2 番目の text-align:left; は、#warp 内のテキストを左揃えにします。
4.15. CSS のインポートと非表示
古いブラウザは CSS をサポートしていないため、@import テクニックを使用して CSS を非表示にするのが一般的な方法です。例えば：
url をインポートします(main.css);
しかし、この方法は IE4 では機能しないため、しばらく頭を悩ませていました。後で私はこう書きました:
main.css をインポートします。
4.16. IE の最適化場合によっては、IE ブラウザのバグに対して特別なルールを定義する必要があります。ここでは CSS トリック (ハック) が多すぎます。私はそのうちの 2 つだけを使用します。Microsoft が今後の IE7 ベータバージョンで CSS をより適切にサポートするかどうかに関係なく、これら 2 つの方法が最も安全です。
1. 注釈方法
(a) IE で CSS 定義を非表示にするには、子セレクターを使用します。
html>本文p {
/*コンテンツを定義する*/
}
(b) 次の構文は IE でのみ理解されます (他のブラウザでは非表示になります)
* html p {
/* 宣言 */
}
(c) 場合によっては、IE/Win を有効にして IE/Mac を非表示にしたいことがあります。その場合は、バックスラッシュトリックを使用できます。
/* */
* html p {
宣言
}
/* */
2. 条件付きコメント CSS Hacks よりも実績があると思われるもう 1 つの方法は、Microsoft のプライベート属性条件付きコメントを使用することです。この方法を使用すると、メインスタイルシートの定義に影響を与えずに、IE のいくつかのスタイルを個別に定義できます。このような：


4.17. デバッグのヒント: レイヤーの大きさはどれくらいですか?
CSS エラーをデバッグするときは、タイプセッターのように CSS コードを 1 行ずつ分析する必要があります。通常、問題のあるレイヤーに背景色を定義して、そのレイヤーが占めるスペースが明確になるようにします。一般的に受け入れられる border の使用を提案する人もいますが、問題は border によって要素のサイズが大きくなる場合があり、border-top と border-bottom によって垂直マージンの値が破壊されるため、background を使用する方が安全であるということです。
問題を引き起こすことが多い別のプロパティはアウトラインです。アウトラインは境界線のように見えますが、要素のサイズや位置には影響しません。アウトラインプロパティをサポートしているブラウザはごくわずかで、私が知っているのは Safari、OmniWeb、Opera だけです。
4.18.CSS コードの書き方 CSS コードを書くとき、インデント、改行、スペースに関しては人それぞれ独自の書き方があります。継続的に練習した結果、私は次のような書き方を採用することにしました。
セレクタ1、
セレクタ2 {
プロパティ:値;
}
共同定義を使用する場合、通常、各セレクターを独自の行に配置して、CSS ファイル内で見つけやすくします。最後のセレクターと中括弧 { の間にスペースを入れ、各定義を別々の行に記述します。セミコロンは、スペースを入れずにプロパティ値の直後に記述します。
通常、各属性値の後にセミコロンを付けます。ルールでは最後の属性値の後にセミコロンを付けなくてもかまいませんが、新しいスタイルを追加するときにセミコロンを付け忘れてエラーが発生する可能性があるため、すべて追加することをお勧めします。
最後に、閉じ中括弧 } を独自の行に配置します。
スペースと改行は読みやすさを向上させます。
おすすめの読み物:
https://www.jb51.net/article/15758.htm
http://portal.oss.org.tw/files/95/a/a6.pdf
http://en.wikipedia.org/wiki/XHTML
http://www.w3.org/TR/2000/REC-xhtml1-20000126/
http://www.dreamdu.com/xhtml/function_xhtml11/

CSS ブラウザ互換性の問題の概要

CSSブラウザ互換性の概要
CSS とブラウザの互換性は、時々頭を悩ませます。関連する技術と原則を理解すれば、難しい作業ではないかもしれません。インターネットから IE7、6、Fireofx の互換性処理方法を集めて整理しました。Web2.0 への移行のために、xhtml 形式でコードを記述してみてください。DOCTYPE は CSS 処理に影響します。W3C 標準として、DOCTYPE 宣言を追加する必要があります。以下は、私たちが仕事でよく使用したり遭遇したりする問題です。
CSS のヒント
5.1.Div 垂直センタリングの問題
vertical-align:middle; 行間隔を DIV 全体と同じ高さに増やします。line-height:200px; 次にテキストを挿入すると、垂直方向に中央揃えになります。欠点は、コンテンツが折り返されないように制御する必要があることです。
5.2. マージンの倍増の問題: float として設定された div のマージンは IE では 2 倍になります。これは IE6 に存在するバグです。解決策は、この div に display:inline; を追加することです。
たとえば、<#div id="imfloat"> 対応する CSS は #IamFloat{ float:left; margin:5px;/*IE は 10px として認識します*/ display:inline;/*IE は 5px として認識します*/
5.3. 浮遊による距離の倍増
#box{ float:left; width:100px; margin:0 0 0 100px; //この場合、IEは200pxの距離を生成します display:inline; //floatを無視します} ここでは、ブロックとインラインの2つの要素について詳しく説明します。ブロック要素の特徴は、常に新しい行から始まり、高さ、幅、行の高さ、および余白を制御できることです（ブロック要素）。インライン要素の特徴は、他の要素と同じ行にあり、制御できないことです（埋め込み要素）。 #box{ display:block; //インライン要素に対してブロック要素をシミュレートできます display:inline; //同じ行に配置する効果を実現します display:table;
5.4. IEと幅と高さの問題
IE は min 定義を認識しませんが、実際には通常の幅と高さを min 値があるかのように扱います。これは大きな問題です。widthとheightだけを使用すると、通常のブラウザではこの2つの値は変化しません。min-widthとmin-heightだけを使用すると、IEでwidthとheightを設定していないのと同じことになります。例えば、背景画像を設定する場合は、この幅がより重要になります。この問題を解決するには、次のようにします: #box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}
5.5. 最小ページ幅
min-width は、要素が特定の幅より小さくならないように指定できる非常に便利な CSS コマンドであり、レイアウトが常に正しいことを保証できます。しかし、IE はこれを認識せず、実際には幅を最小幅として使用します。このコマンドを IE で動作させるには、<body> タグの下に <div> を配置し、div にクラスを割り当てて、次のように CSS を設計します: #container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );} 最初の min-width は通常ですが、2 行目の幅には IE でのみ認識される Javascript が使用されているため、HTML ドキュメントの形式が崩れてしまいます。実際には、JavaScript の判断によって最小幅を実装します。
5.6. DIV フローティング IE テキストで 3 ピクセルのバグが発生する
左のオブジェクトはフロートし、右側は外側のパッチの左マージンを使用して配置されます。右のオブジェクトのテキストは、左から 3 ピクセルの間隔が空けられます。 #box{ float:left; width:800px;} #left{ float:left; width:50%;} #right{ width:50%;} *html #left{ margin-right:-3px; //この文がキーです} <div id="box"> <div id="left"></div> <div id="right"></div> </div>
5.7.IE の非表示とシークの問題 div アプリケーションが複雑で、各列にリンクがいくつかある場合、DIV では非表示とシークの問題が発生しやすくなります。一部のコンテンツは表示できません。この領域をマウスで選択すると、コンテンツが実際にページ上に表示されることがわかります。解決策: #layout に line-height プロパティを使用するか、#layout に固定の高さと幅を使用します。ページ構造はできるだけシンプルに保ちます。
5.8. フロート div を閉じ、フロートをクリアし、高さを調整します。
① 例えば: <#div id=”floatA” ><#div id=”floatB” ><#div id=” NOTfloatC” >ここで NOTfloatC は水平方向に移動し続けるのではなく、下に移動しようとします。 (floatA と floatB のプロパティは float:left; に設定されています) このコードは IE では正常に動作しますが、問題は FF にあります。その理由は、NOTfloatC は float タグではなく、float タグは閉じられている必要があるためです。 <#div class="floatB"> と <#div class="NOTfloatC"> の間に <#div class="clear"> を追加します。この div の位置には必ず注意してください。この div は、float 属性を持つ 2 つの div と同じレベルである必要があります。これらの div の間にネストされた関係があってはなりません。そうでない場合、例外が発生します。そして、クリアスタイルを次のように定義します: .clear{ clear:both;}
② 外部ラッパーとなるdivには固定の高さを設定しないでください。高さが自動的に適応されるようにするには、ラッパーにoverflow:hiddenを追加します。ボックスにfloatが含まれている場合、IEでは高さの自動適応が無効になります。このとき、IEのレイアウトプライベートプロパティがトリガーされる必要があります（くそ、IE！）。これは、zoom:1;を使用することで実現でき、互換性が実現されます。たとえば、ラッパーは次のように定義されます: .colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}
: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
5.9. 高さの不適応性高さの不適応性とは、特に内側のオブジェクトがマージンまたはパディングを使用している場合に、内側のオブジェクトの高さが変わったときに外側のレイヤーの高さを自動的に調整できないことを意味します。例: #box {background-color:#eee; } #box p {margin-top: 20px;margin-bottom: 20px; text-align:center; } <div id="box"> <p>p オブジェクトの内容</p> </div> 解決策: P オブジェクトの上下に 2 つの空の div オブジェクトを追加します。CSS コード: .1{height:0px;overflow:hidden;} または、DIV に border 属性を追加します。
5.10. IE6 で画像の下に隙間があるのはなぜですか? このバグを解決するには、html レイアウトを変更する、img を display:block に設定する、vertical-align プロパティを vertical-align:top | bottom | middle | text-bottom に設定するなど、さまざまな方法があります。
5.11. vertical-align:middle を使用してテキスト入力ボックスのテキストを揃える方法 <style type="text/css">  </style>
5.12. Web 標準で定義されている id と class には違いがありますか?
Web標準では、重複IDを許可していません。たとえば、Div id = "aa"を2回繰り返すことはできませんが、クラスはクラスを定義します。クラスは理論的には無限に繰り返すことができるため、複数回参照する必要がある定義で使用できます。
属性の優先順位は、上記の例3を参照してください。
5.13このメソッドがIEと「テキスト/css」に適用される場合
5.14私はWeb標準でスクロールバーの色を設定できないのですか？ -Type "Content =" Text/HTML; ow-color：＃000;
5.15。
IE6の問題は、デフォルトのラインの高さによって引き起こされます
5.16フラッシュの上にレイヤーを表示するには、フラッシュを透過的に設定することです。
5.17ここでは、レイヤーを垂直に中心にします。
<スタイルタイプ="text/css">
<！ -
分割
{
位置:絶対;
上位:50%;
LEF：50％;
マージン：-100px 0 0 -100px;
幅:200px;
高さ:200px;
border:1px 赤一色;
}
-->
</スタイル>
5.18各ブラウザの最小高さと互換性があります

5.18 IE6のデフォルトのフォントサイズは12〜14pxです
IE6のデフォルトのフォントサイズは、このデフォルト値よりも高さのDIVを定義しようとする場合、このレイヤーの高さはフォントのライン高さよりも低くないと頑固に信じます。したがって、高さ：4pxを使用しても、実際にIEで表示されるものは、約12 pxの高さの層です。オーバーフローの追加：Hiddenは問題を解決します。
<div style = "height：4px; overflow：hidden;"> </div>

FFとIE
1.マージンの右側には、divが中心に設定されています。
2。リンクの境界線と背景（タグ）リンクに境界線と背景色を追加するには、表示する必要があります。メノバーを参照して、Aとメノバーの高さを設定することは、下端ディスプレイがミスアライメントされていない場合、スペースをメニューバーに挿入することができます。
3。訪問されたハイパーリンクスタイルにアクセスした後、ホバースタイルが表示されます。 /スタイル>
4.カーソルフィンガーカーソルカーソル：ポインターは、同時にIE FFでカーソルの指の形を表示できます。
5. ULタグのパディングとマージンにはFFのパディング値がありますが、IEではマージンのみがデフォルト値を持っているため、最初にUL {マージン：0;パディング：0;}を定義できます。
6. IEでは、フォームタグはマージンを自動的にマージンしますが、FFのマージンは0です。したがって、同じものを表示する場合、上記の2つの問題でマージンとパディングを指定することが最善です。
7。FFおよびIEのボックスモデルの一貫性のない解釈の問題は、2pxの違いにつながります。 IEでは、実際には次のように説明されています// ff幅：600px; // ff+ie6.0-}
8。これは互換性があると見なすことはできません。これは、CSSの隠しバグです。 P [ID]では、IDを持つすべてのPタグは同じスタイルです。
9 .gif）No-Repeat 1px 0px;
10. FFのデフォルトの問題は、IEとFFのために異なるCSSを書く必要があります。それはFFとIEと互換性があり、おそらく単純なCSSにとってはそれほど難しくありません。ブラウザがWebページを表示すると、WebページのCSSスタイルシートに基づいて表示することができます。背景は、CSSで指定されていない場合、ブラウザは白または透明などに設定します。したがって、FFとIEのディスプレイが異なることがたくさんある基本的な理由は、デフォルトのディスプレイが異なることです。
11.標準のブラウザで固定された高さのコンテナを開くことができないのはなぜですか？解決策は、Min-Heightを削除することです。
12.為什么IE6下容器的寬度和FF解釋不同呢<?xml version="1.0" encoding="gb2312"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css">  </style> <div ōnclick="alert(this.offsetWidth)">讓firefox與IE兼容</div> 問題的差別在于容器的整體寬度有沒有將邊框（border）的寬度算在其內,這里IE6解釋為200PX ,而FF則解釋為220PX,那究竟是怎么導致的問題呢？コンテナの上部にあるXMLを削除すると、問題がトップトリガーのQurksモードと標準モードについては、http：//www.microsoft.com/china/msdn/library/wwebics/asp.net/ aspnetusstan.
13。IE6をサポートPNG透明性A IE6バグを多くのトラブルに引き起こし、透明なPNG画像をサポートしません。
CSSフィルターを使用する必要があります
*html＃image-style {
背景イメージ：なし;
フィルター：progid：dmimagetransform.microsoft.alphaimageloader（src = "fil
ename.png "、sizingmethod ="スケール "）;
}
14.ラベルAのコンテンツにスタイルを追加する必要がある場合は、表示する必要があります。
15。IE6の下のデフォルトのフォントサイズは、約12〜14pxの間です
IE6の下のデフォルトのフォントサイズは、このデフォルト値よりも小さい高さでDIVを定義しようとする場合、このレイヤーの高さはフォントのライン高さよりも低くないと信じています。したがって、高さ：4pxを使用しても、divの高さを定義するには、約12 pxの高さのレイヤーの実際の表示が依然として12 pxのレイヤーです。オーバーフローを追加：問題を解決するために隠されています。
<div style = "height：4px; overflow：hidden;"> </div>

IE6、IE7、FF IE7.0が出てきており、CSSのサポートに新しい問題があります。より多くのブラウザがあり、IE7.0の互換性の問題を解決するために、私たちは次のように忙しいです。以下は、3つのブラウザの互換性のコレクションです。
1つ目はCSSハック法です
高さ：20px;*firefox* /
*高さ：25px;*ie7およびie6* /
_height：20px;
これはCSSハックにも属します。
#example {color：＃333; * moz * /
* html #example {color：＃666;
*+html #example {color：＃999; *ie7 * /
タイプ2:
<！ - その他のブラウザ - >
<link rel="スタイルシート" type="text/css" href="css.css" />
<！ - [ie 7]> <！ - ie7->に適しています
<link rel="スタイルシート" type="text/css" href="ie7.css" />
<![endif]-->
<！ - [LTE IE 6]> <！ - IE6以下に適しています - >
<link rel="スタイルシート" type="text/css" href="ie.css" />
<![endif]-->
3番目のタイプは、CSSフィルターの方法です。。
次のように新しいCSSスタイルを作成します。
#item { width: 200px; height: 200px; background: red; } 新建一個div,并使用前面定義的css的樣式： <div id="item">some text here</div> 在body表現這里加入lang屬性,中文為zh： <body lang="en"> 現在對div元素再定義一個樣式： *:lang(en) #item{ background:green !important; } 這樣做是為了用!important覆蓋原來的css樣式,由于:lang選擇器ie7.0并不支持,所以對這句話不會有任何作用,于是也達到了ie6.0下同樣的效果,但是很不幸地的是,safari同樣不支持此屬性,所以需要加入以下css樣式： #item:empty { background: green !important } :empty選擇器為css3的規范,盡管safari并不支持此規范,但是還是會選擇此元素,不管是否此元素存在,現在綠色會現在在除ie各版本以外的瀏覽器上。 IE6とFFとの互換性は、過去に考慮することができます。
推奨ライティング方法：
#example {color：＃333; * moz * /
* html #example {color：＃666;
*+html #example {color：＃999; *ie7 * /
覚えやすいと感じています

読書をお勧めします
http://www.cnblogs.com/me-sa/archive/2007/12/03/980685.html#981249
http://693272.blog.163.com/blog/static/364859842008514102556309/
JavaScriptブラウザ互換性の概要

以下は、各ブラウザのコンパイルされたJavaScript互換性情報です。
1。いくつかの参照資料
http://nexgenmedia.net/evang/iemozguide/
http://www.javascriptkit.com/domref/
CSSへのFirefox拡張
http://developer.mozilla.org/en/docs/css_reference:mozilla_extensions
CSS3に関する情報を使用して、CSS3オンラインの現在のブラウザのサポートをテストできます
http://www.css3.info
2.JSデバッグツールFirefoxのFireBugプラグインは、JSが実行するためのブレークポイントを設定し、ランタイム中にCSSスタイルを変更してDOMモデルなどを表示できます。
3. FirefoxすべてのJS警告を開く：
ENTER：arts：config in the Address Bar
ダブルクリックしてJavaScriptオプションを回してくださいRestictをtrueに設定して、エラー修正を助長する多くの警告を確認します
4。javascriptを使用するときに注意すべきこと
名前の代わりにIDを使用して、プロンプトを識別してみてください。
コントロールに名前とIDのみがある場合は、getElementByIDを使用してください。
IE：オブジェクトも見つけることができます
FF：nullを返します
formの要素を取得する方法
elform.elements ['name'];
collectionコレクション要素を取得する場合、つまり、2つの書き込み方法をサポートします。[]と（）は、[]のみをサポートします。
table.rows（5）.cells（0）
変更：
table.rows [5] .cells [0]
offictオブジェクトがオブジェクトであるかどうかを判断する方法
if（typeof object variable == "object"）
if（object variable == "[object]"）の代わりに
△（オブジェクト名） - > document.getElementById
ffサポートeval function△オブジェクトを直接呼び出すid.value = ""
変更する
document.getElementById（ "name"）。value = ""
obj.insertadjacentelement（ "before begin"、objtext）;
代わりに使用してください
obj.parentnode.insertbefore（objtext、obj）;

ffのcreateElementはdocument.write（eshtml）をサポートしていません。
または、要素を作成してから、属性を設定するには、最初にタイプを設定してからDOMに追加する必要があります。
var obj = createElement（ "input"）;
obj.type = "チェックボックス";
var obj2 = document.getElementById（ "id2"）;
obj2.parentnode.insertbefore（obj、obj2）;
HTMLコードを直接挿入する場合、使用することを検討できます
CreateContextualFragment

△Innertext-> textContent
objectオブジェクト名の$は認識できません。_に変更することをお勧めします
objname = "t1 $ spin"
変更する
objname = "t1_spin"
ffの属性をFFに設定してから、この時点でオブジェクトの属性がすべて失われますか？
objtext.setattribute（ "obj"、obj）;
アラート（obj.id）//正しい名前
obj = objtext.getattribute（ "obj"）;
アラート（obj.id）// null
IEでは問題ありません。2番目のパラメーターはSetAttributeの文字列タイプです!!!
したがって、2番目のパラメーターがオブジェクトである場合、オブジェクトのtoString（）メソッドを呼び出すことと同等です。
objtext.dropdown_select = obj;
obj = objtext.dropdown_select

className-> class
クラスを使用して、FFのIEでクラス名を置き換えます
クラスはキーワードであるため、setAttribute/getattributeを使用する必要があります
setAttribute（ "class"、 "CSSスタイル名"）;
htmlで定義されている属性は、getattributeを使用するために使用する必要があります
<td id = "td1" isobj = "true">
取得するとき：
document.getElementById（ "TD1"）。ISOBJは常に未定義であり、IEでは問題ありません。
document.getElementById（ "TD1"）。getAttribute（ "ISOBJ"）

ffFFの選択コントロールはもはやありません：常に上部に表示されるため、コントロールのZindexを設定する必要がある場合があります
IEでSELECTコントロールを上書きする方法はIFAMEを使用することです
if（vars == undefined）の場合、次の値はそれらが同等であると判断するために使用されます
未定義
ヌル
間違い
0

ffがobj.focus（）を呼び出す場合、次のことを変更してください。
window.settimeout（function（）{obj.focus（）;}、20）;

ffでは、キーコードは読み取り専用ですが、キャリッジをタブに変換した場合はどうすればよいですか？
回避策は次のとおりです。
1。ジャンプしてジャンプ処理コードを自分で書き込みます。
DOM内のすべての要素を繰り返し、焦点を設定できる現在の要素の次の要素を見つけて、その焦点を設定します
2。入力できるコントロールでは、
選択した部品を、新しく入力されたコンテンツに置き換えます。VAREXT= STRING.FROMCHARCODE（Event.Keycode）;
同時に、キーイベントのアップロードを防ぐには、event.preventdefault（）に電話してください

△<button> Firefoxによってフォームの送信または更新ページと解釈されますか？
標準<ボタンタイプ= "ボタン"を記述する必要があります
またはonclick = "original function call（）; return false;"

firefoxでは、document.onfocusで実際に集中するコントロールを取得できませんか？
なぜdocument.keydownが可能なのですか？
△子供 - > childrennodes
△sytle.pixelheight-> style.height
function関数または変数が存在するかどうかを判断します
if（！（ "varname" in window））var varname = 1;

document.body.clientwidth
<！doctype html public " - // w3c // dtd xhtml 1.0 transitional // en">
HTMLに上記のステートメントが含まれている場合、次の方法を取得する必要があります
document.documentelement.clientWidth
△window.createpopup
ffは△document.body.onresizeをサポートしていません
FFはwindow.onresizeをサポートしません
Pageが開かれたときに、OnRolodのイベントが開かれたときにトリガーされないことに注意してください。
IEの下のデフォルトのコンテンツボックスは、統合された設定の場合、次のことを使用できます。
div、td {-moz-box-sizing：border-box; box-sizing：border-box; margin：0; padding：0;}
ドキュメントヘッダーに追加することもできます。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
ただし、それは古いIEコード△登録イベントに大きな影響を与えます
IE：AttachEvent
ff：addeventlistener（ "Blur"、myblur、false）;
最初のパラメーターイベント名は「オン」する必要はありません
3番目のパラメーターFALSEは、DOMツリーに沿ったイベントオブジェクトからボディ方向へのイベント配信を表します。

△イベントのトリガー
IE：obj.fireevent（ "onclick"）;
FF：
var e = document.createevent（ "events"）;
E.IniteVent（ "Click"、true、false）;
element.dispatchevent（イベント）
evenceイベント処理機能でオブジェクトハンドルを取得します
var othis = this;
obj.onfocus = function（evt）{
othis.doonfocus（evt）;
}
unified統合イベント処理フレームワークコード
doonfocus（evt）{
evt = evt ||。
var el = evt.target ||。
//後続の処理
}

ffは、Onpropertychangeイベントをサポートしていませんが、プロパティのセッターメソッドは、以下などのFFで定義できます。
htmlelement.prototype .__ Definesetter __（ "readonly"、function（readonly）{
//仮想イベントオブジェクトを作成します
var evt = [];
evt ["ターゲット"] = this;
evt ["propertyname"] = 'readonly'
// OnPropertyChange関数はEVTパラメーターを定義する必要があります。統一されたイベント処理フレームワークコードを参照してください
if（this.onpropertychange）this.onpropertychange（evt）;
});

5.IE-> Firefox CSSクラス△カーソル：ハンド - >カーソル：ポインター
firefoxはIEの下での表現をサポートせず、多くのCPUを消費するため、使用するべきではありません!!
より良い結果を達成するには、IEとFFの両方で使用できるように、JavaScript処理機能に独自の表現を確立する必要があります。
firefoxのフィルターはサポートしていません
フィルター：アルファ（不透明度= 50）;
置き換えます
-moz-不透明度: 0.5;
△テキストオーバーフロー
サポートされていません。透明
obj.setattribute（ "bgcolor"、 "＃ffffffff"）firefoxは色のみをサポートしています。
input [type = text] {
高さ:20px;
}
入力と[！の間にスペースがないことに注意してください。
△フォントはボディとTDで動作できません。IEでは、FFはフォントファミリーを使用できます
6. IEとFirefoxのCSSとJavaScriptの23の違い
http://hi.baidu.com/xg21/blog/item/fbc87c3d624881e93c6d977e.html

7. IEとFirefoxのJavaScriptとCSSの誤解と違い
http://hi.baidu.com/leiting084/blog/item/60dcac6e1decf4dd81cb4a5d.html

8。テキストを書きます
関数compatibleinnertext（id、text）
{
if (navigator.appName.indexOf("Explorer") > -1) {
document.getElementById（ID）.innertext = text;
}
それ以外
{
document.getElementByID（ID）.TEXTCONTENT = TEXT;
}
}
XHTML Standard Div+CSSレイアウトのウェブサイトSEOへの影響
XML Standard Div+CSSレイアウトがWebサイトSEOに与える影響
7.1コードが合理化され、ページコードが合理化されています。コードの単純化には2つの直接的な利点があります。1つ目は、クモのrawりの効率を改善し、最短時間でページ全体をcraうちに、包含品質に特定の利点があります。
7.2テーブルのネストは、一般に、テーブルレイアウトのページに登場する場合、テーブルのネストをクロールしないと述べています。
テーブルレイアウトを使用して、特定の視覚効果を実現するには、複数のテーブルを適用する必要があります。ネストされたテーブルがコアコンテンツである場合、クモがこのセクションをスキップし、ページのコアにcraいない場合、ページは同様のページになります。ウェブサイト上の類似のページが多すぎると、ランキングとドメイン名の信頼に影響します。
ただし、Div+CSSレイアウトには基本的にそのような問題はありません。

7.3速度の問題div+CSSレイアウトは、テーブルレイアウトと比較してページコードを削減し、荷重速度が大幅に改善されます。これは、クモがクロールする場合に非常に有益です。ページコードが多すぎるとクローリングタイムアウトが発生する可能性があり、Spiderはページにアクセスできず、包含と重量に影響を与えると考えるでしょう。
一方、Real Seoerは、包含とランキングを追求することだけではありません。これは、検索エンジンの最適化とマーケティング全体に非常に有益です。
7.4ランキングへの影響は、XTHML標準のDiv+CSSレイアウトに基づいています。設計が完了した後、W3Cの検証に合格することができます。これまでのところ、ランキングルールはW3C標準に準拠したWebサイトやページを支持する傾向があるとは言われていませんが、XTHMLアーキテクチャを使用したWebサイトは一般的にうまくランク付けされていることがわかります。これは議論の余地があるかもしれませんが、ル・シシュ自身はこの見解を維持しています。
この状況はランキングルールではないかもしれません。
結局のところ、Liao Shengyuwuは、ウェブサイトや改訂を構築する友人が技術ライセンスの下でDiv+CSSレイアウトを選択することをお勧めします。
私は長い間働いています。ありがとう！

<<: MySQL の遅いクエリとクエリ再構築方法の記録

>>: 入力のsize属性とmaxlength属性の違い