IEとFIREFOXのCSSの違いと解決策 ページ1/2_体験交流

css はブラウザの互換性にとって非常に重要です。通常、ie と firefox では解析に大きな違いがあります。互換性に関するポイントをいくつか示します。
高さの解析
ie: 高さが未定義の画像コンテンツも含め、コンテンツの高さに応じて変化します。高さが定義されていても、コンテンツが高さを超える場合は、実際の高さが使用されます
firefox: 高さが定義されていない場合、コンテンツに画像コンテンツが含まれている場合、mf の高さ分析は印刷標準に基づいているため、高さが定義されている場合でも、実際のコンテンツの高さと一致しない状況が発生します。コンテンツが高さを超えると、コンテンツは定義の高さを超えますが、その領域で使用されるスタイルは変更されないため、スタイルの位置がずれることがあります。
結論: コンテンツの高さを決定できる場合は、高さを定義するのが最善です。高さを定義する方法が本当にない場合は、境界線スタイルを使用しないことが最善です。そうしないと、スタイルは間違いなく高さになります。混乱した！

img オブジェクトの alt とタイトルの分析
alt: 写真が存在しない場合や読み込みエラーの場合のプロンプト;
title: 写真のヒントの説明。
ieでタイトルが定義されていない場合、altをimgの先端として使用することもできますが、mfでは標準の定義に従って両方が使用されます

結論：誰もが定義していますimg オブジェクトを記述するときは、さまざまなブラウザで正常に使用できることを確認するために、最後にすべての alt オブジェクトと title オブジェクトを記述します

その他の詳細な違い
css を記述するとき、特に を使用するときfloat: left (または right) の画像を表示すると、firefox では正常に動作しますが、ie では問題が発生することがわかります。 margin: 0 または border: 0 を使用して制限しても、役に立ちません。

実は、ここにはもう 1 つ問題があります。それは、ie のスペースの処理です。firefox はそれを無視しますが、ie はブロック間のスペースを処理します。つまり、p は、途中に改行やスペースを入れずに、p の終わりの直後に記述する必要があります。そうしないと、3px ずれてしまうなど、原因がわかりにくい問題が発生する可能性があります。

残念なことに、また同じような問題が発生しました。複数の img タグが接続され、float: left が定義されています。これらの画像が接続できると幸いです。ただし、結果はfirefoxでは正常ですが、ieで表示される各画像は3ピクセル離れています。タグ間のスペースを削除しましたが、機能しませんでした。

後の解決策は、li を img の外側でラップし、li に margin: 0 を定義することで、ie と firefox の間の表示のずれを解決しました。一部のモデルを ie が解釈すると多くのエラーが発生するため、何度も試行することによってのみ原因を発見できます。

2. ネストされた div: 子 div に応じて親 div の高さが自動的に変更できない問題の解決策

<div id="parent"> 
<div id="content"> </div> 
</div>

コンテンツが多い場合、親は高さを 100% または自動に設定します。自動伸縮は、別のブラウザーでは依然として適切に機能しません。解決策

<div id="parent"> 
<div id="content"></div> 
<div style="font: 0px/0px sans-serif;clear: both;display: block"> </div> 
</div>

この問題を解決するには、レイヤーの下部に高さ 1 のスペースを作成します。

3. css div の学習メモ

1. 基本的に、各ブロック div は独自の id を持つ必要があり、異なる機能を持つブロックは同じ id/クラスを使用してはなりません。

2. わずかに大きい各ブロック div の後に は始まりと終わりをマークします

3. テキストを非表示にする別の方法 text-indent: -9999px; line-height: 0

4. 2 つのハンドル列を上手に並列します:

1)
右の列は p、width=44.5%、float=left
左の列は p.first 、border-right: #a7a7a7 1px実線、幅= 45%
2)
右列 #right、マージン左: 50%
左列 #left、float=left、幅= 50% 境界右: #a7a7a7 1px ソリッド

上記 2 つの方法の重要な点は、どちらかを float=left として選択することです。

5. 画像をランダムに切り替える:

#random { 
background: url(/rotate.php); 
}

この方法は非常に巧妙です。

4. div の高さの適応について
今日、xiaowei は、div の高さの適応、つまり親 div にネストするページの問題の解決を手伝ってほしいと頼んできました。左と右の2つの子divです。右の子divの内容は無限に拡張でき、親divの高さは無限に拡張できます。一般的なレイアウト方法を使用すると、正しく参照できますieでは親divがmozillaでは正しく閲覧できるのですが、高さが10px程度で固定されていて高さに適応できず、height:autoでも適応できません。インターネットの記事を参考にしました。高さを適応させるには、div レイヤーに float 属性が必要なので、float:left を使用すると、div がページの左端に移​​動します。これは簡単です。ハンドル. 私はその外側にいます. divのレイヤーを追加して位置を設定すると、内側のfloat:leftを移動しても位置は移動しません。

xhtml:

================================= === =========================

<div id="container_father"> 
<div id="container"> 
<div id="panel"> test<br /> 
test<br /> 
test<br /> 
<!-- id="panel" --> 
</div> 
<div id="sidebar"> 
<ul> 
<li class="current">预安装检查</li> 
<li>阅读 pfc 授权协议</li> 
<li>初始化数据库</li> 
<li>完成安装</li> 
</ul> 
<!-- id="sidebar" --> 
</div> 
<!-- id="container" --> 
</div> 
</div>

css
========= === =====================================

#container_father { 
margin-left: auto; 
margin-right: auto; 
padding: 0px; 
width: 750px; 
} 

#container { 
width: 750px; 
border: 1px solid #cccccc; 
padding: 8px; 
margin: 0px; 
background-color: #f1f3f5; 
float: left; 
}

5.詳細な標準 ~ ie doubled float-margin bug (ie double float-margin bug)
何が起こったのでしょうか?

エラーのないコードは、左フローティング (float:left) 要素をコンテナ ボックス (box) に配置し、フローティング要素の左マージン (margin-left) を使用してコンテナの左側から距離を作成します。とてもシンプルに思えますよね?しかし、ie/win で表示するまでは、ブラウザの左にあるフローティング要素の境界線の長さが不思議なことに 2 倍になっていました。

状況はどうあるべきですか?

次の絵文字は、左フローティング div (緑色のボックス) を含む単純な div (茶色のボックス) を示しています。フローティング要素には 100 ピクセルの左マージンがあり、コンテナ ボックスとその左端の間に 100 ピクセルのギャップが作成されます。ここまでは順調ですね。

 .floatbox { 
float: left; 
width: 150px; 
height: 150px; 
margin: 5px 0 5px 100px; 
/*this last value applies the 100px left margin */ 
}

古い ie「二重占有」

同じコードを ie/win で表示すると、表示方法が少し異なります。次の絵文字は ie/win のレイアウトを示しています。完了の上。

なぜこのようなことが起こるのでしょうか?そんな愚かな質問しないでください！これは ie です、覚えていますか?規格の遵守はあくまで理想的な状況であり、実現が期待されるものではないことを、この単純な事実が証明しています。

重要なポイント

このバグは、フローティングボーダーとフローティング要素の方向が同じ場合に、フローティング要素とコンテナボックスの内端の間でのみ発生します。境界線のあるフローティング要素は、境界線を 2 倍に描画しません。特定の float 行の最初の float 要素のみがこのバグの影響を受けます。不思議なことに、右にも左にも同じように二重のボーダーが現れます。

ついに修正です！

現在 (2004 年 1 月) まで、このバグは修正不可能であると考えられており、通常は次のような間違った境界線制御方法を置き換えるために使用されていました。 非表示の浮動要素の左マージンと内部のネストされたボックスを一緒に配置する、非表示のフロート内に表示ボックスを配置するか、トリックを使用して ie/win の境界線の 1/2 のみを設定します。このアプローチは機能しますが、煩雑で、きれいなソース コードが台無しになります。しかし、もう終わりです。

steve clason は、ゲスト デモで説明されているように、二重余白とテキスト インデント周りのバグを修正する修正を見つけました。これは古典的な ie のバグ修正であり、プロパティを使用して無関係なプロパティに影響を与えるバグを修正します。

今からどうすればいいですか？

よく見てください。必要なのは {display: inline;} を float 要素に設定するだけです。はい、単純すぎますね。しかし、表示の「インライン」宣言だけで十分な効果があるのは事実です。

ルールに詳しい人は、フロート要素が以前の内容に関係なく、自動的に「ブロック」要素に設定されることを知っています。 steve が w3c で指摘したように:

9.5.1 positioning the float: the 'float' property 

"this property specifies whether a box should float to the left, right, or not at all. it may be set for 
elements that generate boxes that are not absolutely positioned. the values of this property have the following
 meanings: 

left 
the element generates a block box that is floated to the left. content flows on the right side of the box, 
starting at the top (subject to the 'clear' property). the 'display' is ignored, unless it has the 
value 'none'. 

right 
same as 'left', but content flows on the left side of the box, starting at the top. 

none 
the box is not floated. "

これは、浮動要素の {display: inline;} が無視されることを意味し、実際、ie を含むすべてのブラウザでは変更がレンダリングされません。ただし、どういうわけか、ie はフローティング要素の境界を 2 倍にするのを停止します。したがって、この修正は、面倒な隠しメソッドを使用せずに直接適用できます。将来のブラウザーがこの修正を好まないと判断した場合は、ie 3 ピクセル テキスト ジョグ デモと同じ詳細を備えた ie 固有の tan hack に単純に組み込むことができます。

ここでは、前と同じコードを使用した 2 つのライブ デモンストレーションを示します。1 つ目は通常どおり ie のバグを示し、次はフローティング要素の「インライン」修正を使用しています。

.floatbox { 
float: left; 
width: 150px; 
height: 150px; 
margin: 5px 0 5px 100px; 
display: inline; 
}

上記は、ie と firefox での css の違いと解決策のページ 1/2 にある経験談の内容です。さらに関連した内容については、php 中国語 web サイト (www.php.cn) に注目してください。 ）！