CSS マルチブラウジングに関するよくある質問の詳細な紹介

CSS がさまざまなブラウザに対応していることは当たり前のことです。
以下の内容は、まったく目新しいものではありません。
1. CSS HACK
現在、次の 2 つのメソッドでほぼすべての HACK を解決できます

1, ! important

IE7 での ! important のサポートにより、! important メソッドは IE6 の HACK のみに使用できるようになりました。
(書き方に注意してください。宣言位置は事前に必要です。)
;

2、FireFox の IE6/IE77

*+html および *html は、Firefox ではまだサポートされていない IE 固有のタグです。また、*+html は、IE7 固有のタグです。 #wrapper
{
#wrapper { width: 120px; } /* FireFox */
*html #wrapper { width: 80px;} /* ie6 修正 */
*+html #wrapper { width: 60px;} /* ie7修正済みです。順序に注意してください*/
}
< ;/style>

注: IE7 用の

*+html HACK では、HTML の先頭に次のステートメントが必ず含まれる必要があります:

2. ユニバーサルフロートクロージャ

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

次のコードを Global CSS に追加します。閉じる必要がある p に class="clearfix" を追加するだけで、毎回機能します
その他の互換性に関するヒント


1、FF の下で p にパディングを設定すると幅と高さが増加しますが、IE では増加しません (!重要で解決できます)
2、垂直方向の中央揃えの問題。 line-height を現在の p と同じ高さに設定し、vertical-align: middle を渡します (コンテンツを折り返さないように注意してください)
2)。
3. a タグ内のコンテンツにスタイルを追加する必要がある場合は、display: block; を設定する必要があります (ナビゲーション タグで一般的)
4、FF と IE の組み合わせで、BOX の理解の違いにより 2px の違いが生じます。 IE では p のマージンが 2 倍になるなどの問題もあります。
5. ul タグにはデフォルトでリスト形式とパディングが付いています。不要なトラブルを避けるために、事前に宣言するのが最善です。
6、外部ラッパーとして、高さを調整するには、overflow: hidden を追加するのが最善です。 hand は IE にのみ適用されます。

1 Firefox ie6 と ie7 の CSS スタイルの場合
現在、ほとんどの場合、ハッキングに ! important が使用されており、ie6 と Firefox のテストは正常に表示できますが、
ie7 は ! important を正しく解釈できます。これにより、ページが必要に応じて表示されません。ピンを見つけました
IE7 の良いハックは、「*+html」を使用することです。IE7 でブラウズすれば問題ありません。
次のような CSS を書きます:

#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE7 */
すると、フォントの色は、Firefox では #333、IE6 では #666、IE7 では #999 として表示されます。

2 CSS レイアウトのセンタリングの問題
主なスタイル定義は次のとおりです:

body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }

手順:

最初に親要素は TEXT-ALIGN: center を定義します。これは、IE では親要素内のコンテンツが中央に配置されることを意味します。この設定で十分です。
ただし、mozilla の中心に置くことはできません。解決策は、サブ要素を設定するときに「MARGIN-RIGHT: auto;MARGIN-LEFT: auto;」を追加することです
この方法を使用してページ全体を中央に配置したい場合は、使用しないことをお勧めします。 p では、複数の p を順番に分割できます。
各分割 p で MARGIN-RIGHT: auto;MARGIN-LEFT: auto; を定義するだけです。

3 ボックスモデルのさまざまな解釈

#box{ //for ie6.0- width:500px; //for ff+ie6.0}

#box{ width:600px! important //for ff width :600px; //ff+ie6.0 の場合 width /**/:500px; //ie6.0-}

4 浮動小数点 ie によって生成される 2 倍の距離

#box{ float:left; width:100px; margin:0 0 0 100px; //この場合、IE は 200px の距離を生成します。 // ブロックとインラインについて説明します。詳細はこちら 2つの要素のうち、Block要素の特徴は常に改行で始まり、高さ、幅、行の高さ、余白をすべて制御できること（Inline要素）です。 ..Uncontrollable (embedded elements);

#box{ display:block; //インライン要素をブロック要素としてシミュレートできます。同じ行 diplay:table;

IE min- の定義がわかりませんが、実際には通常の幅と高さを min があるかのように扱います。これは大きな問題です。通常のブラウザでは幅と高さだけを使用すると、幅と高さは変化しません。 IEではすべて設定されています。

たとえば、背景画像を設定したい場合は、この幅がより重要です。この問題を解決するには、次のようにします:
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; min-height: 35px;}

6 ページの最小幅

min-width は非常に便利な CSS コマンドで、植字が常に正しいことを保証するために、要素の最小幅が特定の幅未満にならないように指定できます。しかし、IE はこれを認識せず、実際には幅を最小幅として扱います。このコマンドを IE で機能させるには、 タグの下に

を配置し、p のクラスを指定します。

その後、CSS は次のように設計されます:

#container{ min-width : 600px ; width:expression(document.body.clientWidth < 600? "600px": "auto" );}
最初の min-width は通常ですが、2 行目の幅は IE でのみ認識されます。 , これにより、HTML ドキュメントも形式的ではなくなります。実際にはJavaScriptの判断により最小幅を実装しています。

7 float をクリアします

.hackbox{ display:table; // オブジェクトをブロック要素レベルのテーブルとして表示します} または .hackbox{ clear:both;}

または追加: (疑似オブジェクト) の後に設定が発生しますオブジェクト Content。通常はコンテンツと組み合わせて使用​​されます。IE はこの疑似オブジェクトをサポートしません。Ie 以外のブラウザーはサポートします。

そのため、IE/WIN ブラウザーには影響しません。これの最も厄介な点は...#box:after{ content: "."; display: block; height: 0; clear: Both; Visibility: hidden;}

8 p のフローティング IE テキストが 3 つの画像を生成するelement

左側のオブジェクトはフローティングで、右側のオブジェクトのテキストは左側から 3 ピクセル離れた位置に配置されます。

#box{ float:left width: 800px;}#left{ float :left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //この文が重要です}

HTML コード

9 属性セレクター (これはできません)互換性があると考えられます。これは非表示の CSS バグです)

p[id]{}p[id]{}

これは IE6.0 以下のバージョン、FF および OPera 関数では非表示になります

属性の間にはまだ違いがありますセレクターとサブセレクター。サブセレクターの範囲は形式的に狭くなり、属性セレクターの範囲は比較的大きくなります。たとえば、p[id] では、id を持つすべての p タグが同じスタイルになります。

10 IEのかくれんぼ問題

場合 アプリケーションが複雑な場合、各列にいくつかのリンクがある場合、かくれんぼ問題が発生しやすくなります。

一部のコンテンツは表示できません。マウスでこの領域を選択すると、コンテンツが実際にページ上にあることがわかります。

解決策: #layout に line-height 属性を使用するか、#layout に固定の高さと幅を使用します。ページ構造はできるだけシンプルにしてください。

11 高さ非適応

高さ非適応とは、特に内部オブジェクトが

margin または Paddign を使用している場合、内側のオブジェクトの高さが変化したときに、外側のレイヤーの高さを自動的に調整できないことを意味します。

例:

p オブジェクトのコンテンツ

CSS: #box {background-color:#eee; p {margin-top: 20px; margin-bottom: 20px; text-align:center; }
解決策: P オブジェクトの CSS コードの上下に 2 つの空の p オブジェクトを追加します: .1{height:0px;overflow :hidden;}または、p に border 属性を追加します。

6. CSS 互換性ポイントの分析 IE と FF

CSS 互換性ポイント:

DOCTYPE は CSS 処理に影響します

FF: p margin-left、margin-right を auto に設定すると、すでに中央揃えになりますが、IE はそうではありませんwork

FF: bodyの設定 テキストを揃えるとき、pはmargin: auto（主にmargin-left、margin-right）を中央揃えに設定する必要があります

FF: パディングを設定した後、p は高さと幅を増加させますが、IE は増加させないため、追加の高さと幅を設定するには ! important を使用する必要があります

FF: ! important はサポートされていますが、IE はそれを無視します。 !FF

p の垂直方向の中央揃えの問題に特別なスタイルを設定することが重要です:vertical-align:middle; 行間隔を p 全体と同じ高さに増やします line-height:200px; 次にテキストを挿入すると、垂直方向の中央揃えになります。欠点は、ラップせずにコンテンツを制御する必要があることです。

カーソル: IE FF ではポインターはカーソルの指の形を同時に表示できますが、手は IE でのみ使用できます

FF: 境界線と背景色を追加するため。リンクでは、改行がないように、display: block と float: left を設定する必要があります。メニューバーに関して、メニューバーの高さを設定するのは、下端の表示のズレを避けるためです。高さが設定されていない場合は、メニューバーにスペースを挿入できます。XHTML+CSS 互換性ソリューションの小さなコレクションです。 XHTML+CSS アーキテクチャを使用することには多くの利点がありますが、未熟な使用法によるものであるか、不明確な考え方によるものであるかにかかわらず、いくつかの問題があることも事実です。皆さんが探し回らないように、私が遭遇した問題のいくつかを以下に書き留めておきます。 ^

1. mozilla Firefox と IE の BOX モデルの説明 不一致により 2px の違いが生じます。 解決策:

p{margin:30px! important;margin:28px;}

2 つのマージンの順序に注意してください。 Ajie 氏によると、! important 属性は IE では認識できませんが、他のブラウザでは認識できるそうです。実際、IE では次のように解釈されます:

p{maring:30px;margin:28px}

定義を繰り返すと、最後の定義に従って実行されるため、単に margin:XXpx と書くことはできません!重要;

2、IE5、IE6 IE5 では、BOX の解釈に一貫性がありません。IE5 では p{width:300px;margin:0 10px 0 10px;}p の幅は 300px-10px (右パディング)-10px (左パディング) として解釈されます。 ) p の最終的な幅は 280px ですが、IE6 の他のブラウザでは、幅は 300px + 10px (右パディング) + 10px (左パディング) = 320px として計算されます。現時点では、次の変更を行うことができます

p{width:300px! important;width /**/:340px;margin:0 10px 0 10px}

、これについて/**/ IE5 と Firefox がサポートしていることしかわかりませんが、IE6 はサポートしています。そうではありません。誰かが理解している場合は、教えてください、ありがとう！ :)

3. Mozilla ではデフォルトで ul タグにパディング値がありますが、IE ではマージンのみが値を持つため、最初に

ul{margin:0;padding:0;}

を定義するとほとんどの問題が解決します

4. スクリプトに関しては、言語属性は

< type="text/java"> に変更するだけです

CSS スキル

1. CSS フォント属性の省略規則

一般的に、CSS でフォ​​ント属性を設定する方法は次のとおりです。 ;

font-size:1em;

line-height:1.5em;

font-family:verdana,sans-serif;

ただし、すべてを 1 行に書くこともできます:

font: 太字斜体小- キャップ 1em/1.5em ベルダナ、サンセリフ;

本当に良いです!注意点が 1 つあります。この省略方法は、font-size プロパティと font-family プロパティの両方が指定されている場合にのみ機能します。また、font-weight、font-style、および font-variant を設定しない場合は、デフォルト値が使用されるため、この点に注意してください。

2. 2つのクラスを同時に使用する

通常、1つの要素に対して設定できるクラス(Class)は1つだけですが、2つ使用できないというわけではありません。実際、これを行うことができます:

...

P 要素に同時に 2 つのクラスをスペースで区切って与え、すべてのテキストが各クラスのサイド属性が P 要素に追加されます。 2 つのクラスの属性間に競合がある場合は、後で設定された方が有効になります。つまり、CSS ファイル内で後から配置されたクラスの属性が有効になります。

補足：IDの場合、

...

のように書くことはできません

3 CSSのボーダーのデフォルト値

。通常は、境界線の色、幅、スタイルを次のように設定できます。

border: 3px Solid #000

これにより、境界線が幅 3 ピクセル、黒、実線で表示されます。しかし実際には、ここでスタイルを指定するだけで済みます。

スタイルのみが指定されている場合、他の属性はデフォルト値を使用します。通常、Border のデフォルトの幅は中程度で、通常は 3 ～ 4 ピクセルに相当します。デフォルトの色はテキストの色です。この値が適切であれば、それほど多くの設定を行う必要はありません。

4. CSSはドキュメントの印刷に使用されます

多くのWebサイトには印刷用のバージョンがありますが、実際にはCSSを使用して印刷スタイルを設定できるため、これは必要ありません。

つまり、ページに 2 つの CSS ファイル (画面表示用と印刷用) を指定できます:

最初の行は表示です。最初の行 2 が印刷されているので、メディア属性に注意してください。

しかし、印刷用 CSS には何を書けばよいのでしょうか?通常の CSS を設計するのと同じ方法で設定できます。デザイン時にこのCSSを設定してCSSを表示し、効果を確認することができます。おそらく、display: none コマンドを使用して、一部の装飾画像をオフにし、一部のナビゲーション ボタンをオフにすることになるでしょう。詳細については、「印刷の違い」の記事を参照してください。

5. 画像置換スキル

一般に、画像の代わりにテキストを表示するには、標準の HTML を使用することをお勧めします。これは、高速であるだけでなく、読みやすくなります。ただし、特殊なフォントを使用する場合は、画像のみを使用できます。

たとえば、物を販売するためのアイコンを作成したい場合は、次の画像を使用します:

< /h1>

もちろん、これは可能ですが、検索エンジンにとって、通常のテキストと比較して、alt の置換テキストにはほとんど関心がありません。これは、多くのデザイナーが検索エンジンを欺くために、ここに多くのキーワードを入れているためです。したがって、メソッドは次のようになります:

ウィジェットを購入

ただし、この方法には特別なフォントはありません。同じ効果を実現するには、次のように CSS を設計できます:

h1 {background: url(/blog/widget-image.gif) no-repeat; height: image height text-indent: -2000px }

次の点に注意してください。画像の高さを変更する 実現する画像の高さ。ここでは画像が背景として表示され、実際のテキストは-2000ピクセルのインデントが設定されているため、画面左側に2000ポイント表示されて見えなくなります。ただし、画像をオフにしている人にとっては、まったく見えなくなる可能性があるので注意してください。

6. CSS ボックス モデルのもう 1 つの調整テクニック

このボックス モデルの調整は、主に IE6 より前の IE ブラウザ向けであり、境界線の幅と空白も要素の幅にカウントされます。例:

#box { width: 100px; border: 5px; padding: 20px }

次のように呼び出します:

...

全幅は 150 ポイントである必要があります。これは、IE6 より前の IE を除くすべてのブラウザで正しくなります。ただし、IE5 などのブラウザでは、全幅は依然として 100 ポイントです。この違いは、先人が発明したボックス調整方法を使用して処理できます。

しかし、表示の一貫性を保つために CSS を使用しても同じ目的を達成できます。

#box { width: 150px } #box p { border: 5px; padding: 20px }

次のように呼び出します:

...

この方法では、どのブラウザでも幅は 150 ポイントになります。

7. ブロック要素を中央に配置します

固定幅の Web ページを作成し、Web ページを水平方向に中央揃えにしたい場合は、通常次のようになります:

#content { width: 700px margin: 0 auto; }

< ;p id="content"> を使用してすべての要素を囲みます。これは単純ですが十分ではなく、IE6 より前のバージョンではこの効果が表示されません。 CSS を次のように変更します:

body { text-align: center } #content { text-align: left; width: 700px; margin: 0 auto }

これにより、Web ページのコンテンツが中央に配置されるため、

を追加しますコンテンツ

text-align: left 。

8. CSS を使用して垂直方向の配置を処理します

テーブルユニットを垂直配置:中央に設定するだけで、テーブルを使用して簡単に垂直方向の配置を実現できます。しかし、これは CSS では役に立ちません。ナビゲーション バーの高さを 2em に設定し、ナビゲーション テキストを垂直方向の中央に配置したい場合、この属性を設定しても役に立ちません。

CSSメソッドとは何ですか?ちなみに、これらの単語の行の高さを 2em に設定します: line-height: 2em これで完了です。

9. コンテナ内での CSS の配置

CSS の利点の 1 つは、コンテナ内であっても要素を任意に配置できることです。たとえば、このコンテナの場合:

#container {position:relative }

このようにして、コンテナ内のすべての要素が相対的に配置されます:

...

左から 30 ポイント、上から 5 ポイントの位置に配置したい場合は、次のようにすることができます:

#navigation {position:Absolute; left: 30px; top: 5px }

もちろん、次のようにすることもできます:

margin: 5px 0 0 30px

4 つの数字の順序は、上、右であることに注意してください。 、 左下。もちろん、場合によってはマージンよりも位置決めの方が良い場合もあります。

10. 画面の一番下にある背景色

は垂直方向に制御され、CSSでは制御できません。ナビゲーションバーをコンテンツバーのようにページの一番下に直接移動させたい場合は、テーブルを使用するのが非常に便利ですが、次のようにCSSのみを使用する場合は次のようになります。 }

ナビゲーションバーが短くなりました すぐに一番下まで進むことはなく、コンテンツが途中で終了すると終了します。それについて私たちは何ができるでしょうか？

残念ながら、チートする唯一の方法は、列幅と同じ幅で短い列に背景画像を追加し、設定された背景色と同じ色にすることです。

body {background: url(/blog/blue-image.gif) 0 0repeat-y }

現時点では em を単位として使用することはできません。その場合、リーダーがフォント サイズを変更すると、トリックはpxのみ使用可能です。

以上がCSS マルチブラウジングに関するよくある質問の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。