CSSブラウザの非互換性の原因の分析-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSブラウザの非互換性の原因の分析

不言

Jun 28, 2018 am 11:45 AM

この記事では、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 」メソッドを使用します。

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=”” / alt="CSSブラウザの非互換性の原因の分析" > 
</p>

p の境界線を開くと、画像の下部がコンテナーの下部に近づいていないことがわかります。 img の後ろの空白文字で削除する必要があります

<p> 
<img  src=”” src=”” / alt="CSSブラウザの非互換性の原因の分析" ></p>

次の 2 つのタグは互いに隣接する必要があります。このバグはie7でもまだ存在します。解決策: display:block を img に設定します。

12. 行の高さを失います。

CSSブラウザの非互換性の原因の分析 Text

残念ながら、IE6 では 1 行のテキストの行の高さの効果が消えます。。。理由は、 CSSブラウザの非互換性の原因の分析

inline-block 要素と inline 要素が一緒に書かれているためです。解決策: img と 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值也会失效

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，

内有的情况下，position:relative层下的float层内文字无法选中。这个bug迫使我修公用样式库。

21.终于来了个ff的缺点。width:100%这个东西在ie里用很方便，会向上逐层搜索width值，忽视浮动层的影响，ff下搜索至浮动层结束，如此，只能给中间的所有浮动层加width:100%才行，累啊。opera这点倒学乖了跟了ie。

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

CSS透明opacity和IE各版本透明度滤镜filter的用法

关于webpack项目混用css module的方法

以上がCSSブラウザの非互換性の原因の分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

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

これは発生することは想定されていません。不可能をトラブルシューティングしますMay 15, 2025 am 10:32 AM

あなたが考えたことのない他の何かであることが判明したそれらの不可能な問題の1つをトラブルシューティングすることがどのように見えるか。

@KeyFrames対CSSトランジション：違いは何ですか？May 14, 2025 am 12:01 AM

@keyframesandcsstransitionsdifferincomplexity：@keyframesallowsfordeTailedAnimationのシーケンス、whilecsstransitionshandlesimplestatechanges.usecsstransitionsは、ButtonColorChanges、および@keyframesforintricateanimationslikerotatingingspinnnersを使用します。

静的サイトコンテンツ管理にページCMSを使用しますMay 13, 2025 am 09:24 AM

私は知っています、私は知っています：たくさんのコンテンツ管理システムオプションが利用可能であり、私はいくつかテストしましたが、実際にはY＆＃039;知っているものはありませんでしたか？奇妙な価格設定モデル、困難なカスタマイズ、一部は全体になることさえあります＆

HTMLのCSSファイルをリンクするための究極のガイドMay 13, 2025 am 12:02 AM

CSSファイルをHTMLにリンクすることは、HTMLの一部で要素を使用することで実現できます。 1）タグを使用して、ローカルCSSファイルをリンクします。 2）複数のタグを追加することにより、複数のCSSファイルを実装できます。 3）外部CSSファイルは、そのような絶対URLリンクを使用します。 4）ファイルパスとCSSファイルの読み込み順序の正しい使用を確認し、パフォーマンスを最適化すると、CSSプリプロセッサを使用してファイルをマージできます。

CSS Flexbox vsグリッド：包括的なレビューMay 12, 2025 am 12:01 AM

FlexBoxまたはグリッドの選択は、レイアウト要件によって異なります。1）FlexBoxは、ナビゲーションバーなどの1次元レイアウトに適しています。 2）グリッドは、雑誌のレイアウトなどの2次元レイアウトに適しています。この2つは、レイアウト効果を改善するためにプロジェクトで使用できます。

CSSファイルを含める方法：メソッドとベストプラクティスMay 11, 2025 am 12:02 AM

CSSファイルを含める最良の方法は、タグを使用してHTMLパーツに外部CSSファイルを導入することです。 1.タグを使用して、外部CSSファイルを導入します。 2。小さな調整のために、インラインCSSを使用できますが、注意して使用する必要があります。 3.大規模プロジェクトでは、@Importを介して他のCSSファイルをインポートするために、SASS以下などのCSSプリプロセッサを使用できます。 4。パフォーマンスのために、CSSファイルをマージし、CDNを使用し、CSSNANOなどのツールを使用して圧縮する必要があります。

FlexBox対グリッド：両方を学ぶべきですか？May 10, 2025 am 12:01 AM

はい、Youはrelearnbothlexboxandgrid.1）FlexBoxisidealforone-Dimensional、FlexiblleayoutslikenavigationMenus.2）Gridexcelsintwo-digsignssuchasmagazinelayouts.3）Bothenhanceslaysutibulivedibulisunivedivition、floctonsulururを

軌道力学（またはCSSキーフレームアニメーションの最適化方法）May 09, 2025 am 09:57 AM

独自のコードをリファクタリングするのはどのように見えますか？ジョン・レアは、彼が書いた古いCSSアニメーションを選び、それを最適化するという思考プロセスを歩きます。

See all articles

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーションサーバーと統合します。

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。