div+css は ie6 ie7 ie8 ie9 および FireFox Chrome と互換性あり method_html/css_WEB-ITnose

を配置し、その div のクラスを指定して、次のように CSS を設計します:

#container{ min-width: 600px ; width :expression(document.body.clientWidth

最初の min-width は通常ですが、2 行目の幅は IE でのみ認識されます。また、HTML ドキュメントの堅苦しさも軽減されます。実際にはJavaScriptの判断により最小幅を実装しています。

6. DIV フローティング IE テキストは 3 ピクセルのバグを生成します

左側のオブジェクトはフローティングで、右側は外側のパッチの左マージンを使用して配置され、右側のオブジェクトのテキストは左側から 3 ピクセル離れた位置になります。 .

#box{ float: left; width:800px;}

#left{ float:left; width:50%;}

*html #left{ margin-right:- 3px; //この文がキーです }

/div>

7.IE かくれんぼの問題

div アプリケーションが複雑で、各列にいくつかのリンクがある場合、この時点で DIV のかくれんぼ問題が発生しやすくなります。
一部のコンテンツは表示できません。マウスでこの領域を選択すると、コンテンツが実際にページ上にあることがわかります。

解決策: #layout に line-height 属性を使用するか、#layout に固定の高さと幅を使用します。ページ構造はできるだけシンプルにしてください。

8. Float div クロージャー; 適応高さ;

ここの NOTfloatC は翻訳を続行せず、下に移動したいと考えています。 (floatAとfloatBの属性はfloat:leftに設定されています;) このコードはIEでは問題ありませんが、問題はFFにあります。その理由は、NOTfloatC が float ラベルではないため、float ラベルを閉じる必要があるためです。
② div の高さを外部ラッパーとして設定しないでください。高さが自動的に適応されるようにするには、ラッパーに overflow: hidden を追加します。 ; フロートを含むボックスが使用される場合、IE では高さの自動調整が無効になります (邪悪な IE!) 互換性を実現するには、zoom:1; を使用します。 たとえば、ラッパーは次のように定義されます:

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

③植字の場合、最も一般的に使用される CSS 記述は、Create が必要になる場合があります。列 n の float div の背後にある統一された背景:

たとえば、3 つの列すべての背景色を青に設定します。 . しかし、左中央右が下に伸びても、ページは実際には同じ高さを維持することがわかります。ページがフロート属性ではなく、ページを中央に配置する必要があるため、ページをフロートに設定できないためです。これが解決策です

＜div id=”page”>

＜div id=”bg” style=”float:left;width:100%”>

＜p>p オブジェクトのコンテンツ＜/p> ＜/div>

解決策: P オブジェクトの上下に 2 つの空の div オブジェクトを追加します。 CSS コード: .1{height:0px;overflow:hidden;} DIV に border 属性を追加します。
1. div の垂直方向の中央揃えの問題
vertical-align:middle; 行間を DIV 全体と同じ高さまで増やす line-height:200px; その後、テキストを挿入すると垂直方向の中央揃えになります。欠点は、コンテンツが折り返されないように制御する必要があることです。

2. マージンが 2 倍になる問題

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



対応する CSS は


#imfloat{

margin:left; / *IE では 10px として認識されます*/

display:inline;/*IE では 5px として認識されます*/}

3. float ie によって生成される倍の距離
#box{ float:left width; :100px; margin: 0 0 0 100px; //この場合、IE は 200px の距離を生成します。 display:inline; //float を無視します}

ここで、block と inline の 2 つの要素について詳しく説明します。ブロック要素の特徴は、常に新しい行で開始し、高さ、幅、行の高さ、余白をすべて制御できることです (ブロック要素)。Inline 要素の特徴は、他の要素と同じ行にあることです。要素は制御できません (インライン要素)。

#box{ display:block; //インライン要素をブロック要素としてシミュレートできます。 display:inline; //同じ行に配置する効果を実現します

4 IE と幅と高さの問題

IEは min-この定義を認識しませんが、実際には通常の幅と高さを min があるかのように扱います。これは大きな問題です。通常のブラウザでは幅と高さだけを使用すると、幅と高さはまったく設定されません。 IEの下で。
たとえば、背景画像を設定したい場合は、この幅がより重要です。この問題を解決するには、次のようにします。

#box{ width: 80px; height: 35px;}html>body #box{ width: auto; min-width: 80px; }

5. ページの最小幅

Min-width は、レイアウトが常に正しいことを保証するために、要素の最小幅が特定の幅未満にならないように指定できる非常に便利な CSS コマンドです。 。しかし、IE はこれを認識せず、実際には幅を最小幅として扱います。このコマンドを IE で機能させるには、

タグの下に