ホームページ ウェブフロントエンド htmlチュートリアル [転送] CSS ブラウザの互換性問題の概要_html/css_WEB-ITnose

[転送] CSS ブラウザの互換性問題の概要_html/css_WEB-ITnose

Jun 24, 2016 am 11:55 AM

E6.0、ie7.0 および Firefox の CSS 互換性の問題 1.DOCTYPE は CSS 処理に影響します
2.FF: margin-left と margin-right が auto に設定されている場合、div はすでに中央に配置されていますが、IE は動作しません
3 .FF: body が text-align を設定するとき、div は margin: auto (主に margin-left、margin-right) を中央に設定する必要があります
4.FF: パディングを設定した後、div は高さと幅を増加させますが、IE は増加しません追加の高さと幅を設定するには ! important を使用します
5.FF: ! important をサポートしますが、IE はそれを無視します。 ! important を使用して FF の特別なスタイルを設定できます。 xxxx ! という文は注目に値します。 important は別の文の上に配置する必要があります
6. div の垂直方向の中央揃えの問題:vertical-align:middle; 行間を DIV 全体と同じ高さに増やすと、テキストを挿入すると垂直方向の中央揃えになります。 。欠点は、行の折り返しなしでコンテンツを制御する必要があることです
7. カーソル: ポインターは IE FF でカーソルの指の形を同時に表示できますが、手は IE でのみ使用できます
8. FF: 境界線を追加し、リンクの背景色を設定するには、display: block を設定し、float: left を設定する必要があります。これにより、改行がないことが保証されます。メニューバーに関して、a とメニューバーの高さを設定するのは、下端の表示がずれないようにするためです。高さを設定しない場合は、メニューバーにスペースを挿入できます。
9. mozilla firefox と IE の BOX モデルの解釈が一致しないため、2px の違いが生じます。 解決策: div{margin:30px! important;margin:28px;}
この 2 つの margin の順序を記述してはいけないことに注意してください。 Ajie 氏によると、引数 ! important は IE では認識されませんが、他のブラウザでは認識されます。実際にIEでは div{maring:30px;margin:28px} のように解釈されます
定義を繰り返すと最後の定義に従って実行されるので、単に margin:XXpx! important;

と書くことはできません10. IE5とIE6の不一致のBOX説明
div{width:300px;margin:0 10px 0 10px;}
IE5でのdivの幅は300px-10px(右パディング)-10px(左パディング)と解釈されます。 div の最終的な幅は 280px ですが、IE6 および他のブラウザーの幅は 300px + 10px (右パディング) + 10px (左パディング) = 320px として計算されます。現時点では、 div{width:300px! important;width /**/:340px;margin:0 10px 0 10px}
これについて/**/ に次の変更を加えることができます。それが何であるかはよくわかりませんが、IE5 と Firefox がサポートしていることだけがわかります。そうではありません。誰かがそれを理解している場合は、教えてください、ありがとう! :)

11. Mozillaではデフォルトでulタグにpadding値が入っていますが、IEではmarginのみが値を持っているので、ul{margin:0;padding:0;}
を定義すればほとんどの問題は解決できます


注:

1. float div は閉じられている必要があります。

例: (floatAとfloatBの属性はfloat:leftに設定されています;)


ここでのNOTfloatCは平行移動を続けたくなく、下方向に配置したいと考えています。
このコードはIEでは問題ありませんが、問題はFFにあります。その理由は、NOTfloatC が float ラベルではないため、float ラベルを閉じる必要があるためです。

の間に
を追加します
このdivは宣言位置に注意し、最も適切な場所に配置する必要があり、float属性を持つ2つのdivと同じレベルにある必要があります。そうしないと異常が発生します。
そして、clear スタイルを次のように定義します: .clear{
clear:both;}
さらに、高さが自動的に適応できるようにするために、このとき float を含むボックスの場合、ラッパーに overflow: hidden;
を追加します。現時点では、高さの自動調整は IE では無効です。互換性を実現するには、IE のレイアウト プライベート属性をトリガーする必要があります。
例えば、ラッパーは次のように定義されます:

プログラムコード


.colwrapper{
overflow:hidden;
zoom:1;
margin:5px auto;}



2. ダブルマージン問題。

IEでfloatに設定されたdivに設定されたマージンが2倍になります。これはie6に存在するバグです。
解決策は、display:inline;を追加することです
例:



対応するCSSは

プログラムコード


#IamFloat{
float:left;
margin:5px;/*IEでは10pxと理解されます。 */
display:inline;/*IE では 5px として認識されます*/}



3. コンテナの包含関係について

多くの場合、特にコンテナ内に 2 つまたは 3 つの float div などの並列レイアウトがある場合、幅の問題が発生しやすくなります。 IE では、外側の層の幅は、より広い内側の div によって圧迫されます。ピクセルレベルの精度で測定するには、必ず Photoshop または Firework を使用してください。

4. 高さの問題について

コンテンツが動的に追加される場合は、高さを定義しないのが最善です。ブラウザは自動的に拡大縮小できますが、静的コンテンツの場合は高さを設定するのが最善です。 (自動で開かない場合もあるようです。何が起こっているのかわかりません)

5. 最も無慈悲な方法 - !重要;

本当に細かい問題を解決する方法がない場合は、次の方法を使用できます。このメソッド。FF の「! important」は最初に自動的に解析されますが、次の

プログラム コード


.tabd1{
background:url(/res/images/up/tab1.gif) no-repeat 0px 0px ! important; /*FF のスタイル*/
background:url(/res/images/up/tab1.gif) no-repeat 1px 0px /* IE のスタイル */}



; xxxx でなければならないことに注意してください !重要 この文は別の文の上に配置されています 上で述べたように、



IE7.0 がリリースされ、CSS サポートに新たな問題が発生しました。ブラウザの数が増え、Web ページの互換性が悪化しています。IE7.0 の互換性の問題を解決するために、私は次の記事を見つけました:


現在、私は主にハッキングに !重要なメソッドを使用しています。 ie6 と Firefox のテストでは正常に表示できますが、ie7 では ! important を正しく解釈できるため、ページが必要どおりに表示されなくなります。検索した結果、「*+html」を使用するという IE7 用の良いハックを見つけました。これで IE7 で閲覧できるようになりました。問題はありません。

これで次のような CSS を書くことができます:

プログラム コード


#example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
* +html #example { color: #999; } /* IE7 */



すると、フォントの色は、Firefox では #333、IE6 では #666、IE7 では #999 として表示されます。互いに干渉し合う。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は? 公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は? Mar 04, 2025 pm 12:32 PM

公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか?この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース(写真、CSS、JSなど)やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? Mar 17, 2025 pm 12:27 PM

この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? Mar 17, 2025 pm 12:20 PM

記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

WebページのPNG画像にストローク効果を効率的に追加する方法は? WebページのPNG画像にストローク効果を効率的に追加する方法は? Mar 04, 2025 pm 02:39 PM

この記事では、CSSを使用したWebページへの効率的なPNG境界追加を示しています。 CSSはJavaScriptやライブラリと比較して優れたパフォーマンスを提供し、微妙または顕著な効果のために境界幅、スタイル、色を調整する方法を詳述していると主張しています

< datalist>の目的は何ですか 要素? < datalist>の目的は何ですか 要素? Mar 21, 2025 pm 12:33 PM

この記事では、HTML< Datalist>について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

HTML5< time>を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? HTML5< time>を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? Mar 12, 2025 pm 04:05 PM

この記事では、html5< time>について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ(ISO 8601形式)のDateTime属性の重要性を強調し、Accessibilitを増やします

< Progress>の目的は何ですか 要素? < Progress>の目的は何ですか 要素? Mar 21, 2025 pm 12:34 PM

この記事では、HTML< Progress>について説明します。要素、その目的、スタイリング、および< meter>との違い要素。主な焦点は、< Progress>を使用することです。タスクの完了と< Meter> statiの場合

< meter>の目的は何ですか 要素? < meter>の目的は何ですか 要素? Mar 21, 2025 pm 12:35 PM

この記事では、html< meter>について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化< Meter> < Progress>およびex

See all articles