CSSブラウザの非互換性の原因の分析
この記事では、CSS ブラウザーの非互換性の原因の分析を主に紹介します。これは、必要な友人に参考にしていただけると思います。しかし、より重要なこと、つまり根本原因を追跡し、同様の非互換性が再び発生するのを避けることを忘れてください。
いくつかのガイダンスを提供できることを願って、いくつかの HTML コーディング要素を要約したいと思います。
1. テキスト自体のサイズに互換性がありません。 font-size: 14px の同じ Song スタイルのテキストは、ブラウザごとに異なるスペースを占めます。IE では、実際には高さ 16 ピクセル、下マージンで 3 ピクセルを占めますが、FF では実際に高さ 17 ピクセル、上マージンで 1 ピクセルを占めます。下の1px、白3px、オペラの下ではさらに異なります。解決策: テキストの行の高さを設定します。すべてのテキストにデフォルトの行の高さの値があることを確認してください。これは重要です。高さの 1 ピクセルの違いは許容できません。
2. コンテナの高さは ff では制限されています。つまり、コンテナが高さを定義した後、コンテナの境界線の形状が決定され、コンテンツによって拡張されません。ただし、ie では、コンテナの境界線は拡張されます。コンテンツであり、高さ制限は無効です。したがって、コンテナの高さを簡単に定義しないでください。
3. コンテンツがコンテナを水平に壊す問題についても議論しました。 float コンテナに幅が定義されていない場合、ff の下のコンテンツはコンテナの幅を可能な限り拡張し、ie の下ではコンテンツの折り返しが優先されます。したがって、中身が破裂する可能性があるフローティングコンテナは幅を定義する必要があります。
小さな実験: 興味があれば、この実験を見てみることができます。次の各コードをさまざまなブラウザーでテストします。
a.<p style=”border:1px solid red;height:10px”></p> b.<p style=”border:1px solid red;width:10px”></p>
c.<p style=”border:1px solid red;float:left”></p> d.<p style=”border:1px solid red;overflow:hidden”></p>
上記のコードは、ブラウザーによって異なります。この実験は、小さい高さの値 p、、小さい高さの値の使用から始まりました。 overflow:hidden と一緒に使用する必要があります。この実験は単なる趣味です。私が指摘したいのは、ブラウザーによってコンテナー境界の解釈が大きく異なり、コンテナーのコンテンツの影響が異なるということです。
4. ff の下のフロートをクリアしないと機能しません。
皆さんの誤解を正しておきますが、非互換性に遭遇したときに ff が悪いと言うのは間違いです。実際、私たちを困惑させるのは ie の奇妙な動作のほうです。以下に、ie6 のさまざまな悪行をリストします。
5. 最も嫌われている、二重マージンのバグ。 IE6 でフローティング コンテナーの margin-left または margin-right を定義すると、実際の効果は値の 2 倍になります。解決策は、フローティング コンテナーに対して display:inline を定義することです。
6.mirrormarginのバグ、外側の要素にfloat要素がある場合、外側の要素にmargin-top:14pxが定義されていると、margin-bottom:14pxが自動生成されてしまいます。同様の問題は、IE6 の特殊なパディングでも発生します。この種のバグが発生する状況は、この種の発生条件だけではなく、はるかに複雑であり、体系的に整理されていません。解決策: 外側の要素にボーダーまたはフロートを設定します。
拡張: ff と ie のコンテナーの margin-bottom と padding-bottom の説明が矛盾する場合がありますが、これが関係しているようです。
7. 紙面の都合上、嚥下現象については詳しく説明しません。まだIE6ですが、上のpは背景を設定していますが、背景のない下のpにも背景があることが分かります。上記の背景の飲み込み現象に対応して、スクロール時に枠が欠ける現象もあります。解決策: ズーム:1 を使用します。このズームはie6のバグを解決するために特別に設計されているようです。
8. コメントもバグを引き起こす可能性があります~~~ 「余分な豚。」 これは、IE6 のこのバグの下で、ページ上に豚という単語が 2 回表示されるのがわかります。重複コンテンツの量はコメントの数によって異なります。解決策: コメントを記述するには、「 picRotate start 」メソッドを使用します。
9.
Riga float 、これは典型的で難しい互換性の問題です。ff では li の属性が異なると解釈の影響も異なります。説明はある程度理解できますが、問題が複雑なため、IE6 での説明では混乱するでしょう。この問題については別の記事で説明します。関連する結果は「ul 使用体験」の記事にありますが、問題を解決するプロセスは示されていません。10. 「float:left;display:inline」を使用した ul の奇妙な動作。この CSS は、ie6 での二重マージンのバグに対応して、display:inline に追加されていることがわかります。これは、私の CSS システムの重要な部分でもあります。これについては、「ul の使用経験」の記事で説明しています。そして、この CSS を UL で使用すると悲惨な結果になります。とりあえずここではこれ以上は言えません。
11.img の下の空白部分は、このコードのどこが間違っているのかを確認してください:
<p> <img src=”” src=”” /> </p>
p の境界線を開くと、画像の下部がコンテナーの下部に近づいていないことがわかります。 img の後ろの空白文字で削除する必要があります
<p> <img src=”” src=”” /></p>
次の 2 つのタグは互いに隣接する必要があります。このバグはie7でもまだ存在します。解決策: display:block を img に設定します。
12. 行の高さを失います。
Text
引申：大家知道img 的align 有 text-top，middle，absmiddle啊什么的，你可以尝试去调整img 和文字让他们在ie和ff下能一致，你会发现怎么调都不会让你满意。索性让img 和文字都 float起来，用margin 调整。
13.链接的hover状态。a:hover img{width:300px} 我们想让鼠标hover时，链接里包含的图片宽度变化，可惜在ie6下无效，ie7、ff下有效。
14.非链接的hover状态。p:hover{} 这样的样式ie6是不认的，在ie7、ff下才有效果。
15.block化的a链接，其内套absolute层，absolute层内放置img，ie下，鼠标点击img不会有链接效果，ff、op下正常。
想不出来了，以后想到再加吧。上面的诸多问题如果你掌握了其中奥妙，90%的不兼容问题不需要另起css hack的。
16.无法彻底清除的float。如果让ul下的li具有了float属性，如何clear浮动的li呢？
class=”c”>
class=”c”>
class=”c”>
或者上述的组合？这个问题，我无法给出解答。下面有个例子与此相关<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<style type=text/css>
.c{clear:both;overflow:hidden;+overflow:visible}
.bd{border:1px solid red}
ul.ex{list-style:none;}
ul.ex li{float:left;border:1px solid green;}
</style>
<ul class=ex>
<li>sfsdfsfdf</li>
<li>sfsdfsfdf</li>
</ul>
<p class=c></p>
<p class=bd style=margin-top:19px>sfsdfsfdf</p>请在ie下 测试，仅仅将 margin-top:19px 改为margin-top:20px 你发现什么了？要素：doctype必须有，ie6、ie7下margin-top:19px还好好的，margin-top:20px 就出问题了，无法解释。。。大家还可以将 clear 层换不同的位置测试。
解决方案：给ul 属性zoom:1 （给li 加zoom:1 没用）
引申：clear层应该单独使用。也许你为了节省代码把clear属性直接放到下面的一个内容层，这样有问题，不仅仅是ff和op下失去margin效果，ie下某些margin值也会失效
dd
ff
17.ie下overflow:hidden对其下的绝对层position:absolute或者相对层position:relative无效。解决方案：给overflow:hidden加position:relative或者position:absolute。另，ie6支持overflow-x或者overflow-y的特性，ie7、ff不支持。
18.ie6下严重的bug，float元素如没定义宽度，内部如有p定义了height或zoom:1，这个p就会占满一整行，即使你给了宽度。float元素如果作为布局用或复杂的容器，都要给个宽度的。
19.ie6下的bug，绝对定位的p下包含相对定位的p，如果给内层相对定位的p高度height具体值，内层相对层将具有100%的width值，外层绝对层将被撑大。解决方案给内层相对层float属性。
20.ie6下的bug，
内有21.终于来了个ff的缺点。width:100%这个东西在ie里用很方便，会向上逐层搜索width值，忽视浮动层的影响，ff下搜索至浮动层结束，如此，只能给中间的所有浮动层加width:100%才行，累啊。opera这点倒学乖了跟了ie。
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
CSS透明opacity和IE各版本透明度滤镜filter的用法
以上がCSSブラウザの非互換性の原因の分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
1673
14
1429
52
1333
25
1278
29
1257
24
VueでBootstrapの使用方法
Apr 07, 2025 pm 11:33 PM
vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。
HTML、CSS、およびJavaScriptの理解：初心者向けガイド
Apr 12, 2025 am 12:02 AM
webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、
HTML、CSS、およびJavaScriptの役割：コアの責任
Apr 08, 2025 pm 07:05 PM
HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
ブートストラップに写真を挿入する方法
Apr 07, 2025 pm 03:30 PM
ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。
ブートストラップにスプリットラインを書く方法
Apr 07, 2025 pm 03:12 PM
ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。
ブートストラップのフレームワークをセットアップする方法
Apr 07, 2025 pm 03:27 PM
Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。
ブートストラップボタンの使用方法
Apr 07, 2025 pm 03:09 PM
ブートストラップボタンの使用方法は？ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します
