ホームページ ウェブフロントエンド 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)

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

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

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

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

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

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

HTMLは初心者のために簡単に学ぶことができますか? HTMLは初心者のために簡単に学ぶことができますか? Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1)HTMLの学習曲線はスムーズで簡単に開始できます。 2)基本タグをマスターして、Webページの作成を開始します。 3)柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用​​できます。 4)豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? Mar 20, 2025 pm 05:56 PM

この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。

< iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? < iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? Mar 20, 2025 pm 06:05 PM

この記事では、< iframe>外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。

HTML、CSS、およびJavaScriptの役割:コアの責任 HTML、CSS、およびJavaScriptの役割:コアの責任 Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLでの開始タグの例は何ですか? HTMLでの開始タグの例は何ですか? Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。

See all articles