一部のCSSスキルについては、div/IE6/IE7/IE8/FF_html/css_WEB-ITnose

1.div の垂直方向の中央揃えの問題

vertical-align:middle; 行間隔を DIV 全体と同じ高さまで増やす line-height:200px; 次にテキストを挿入すると、垂直方向の中央揃えになります。欠点は、コンテンツが折り返されないように制御する必要があることです。

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

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

#box{ float:left; margin:0 0 100px; を追加します。 of 200px display:inline; //ignore float}

ここでは、block と inline の 2 つの要素について詳しく説明します。 block 要素の特徴は、常に新しい行、高さ、幅、行の高さ、マージンで始まることです。制御可能 (ブロック要素); インライン要素の特徴は、他の要素と同じ行にあり、制御できないことです (インライン要素)。ブロック要素 display:inline; // 同じ行に配置する効果を実現


4 IE と幅と高さの問題

IE は min- の定義を認識しませんが、実際には通常の値を扱いますwidth と height as min が使用可能な場合に使用します。これは大きな問題です。通常のブラウザでは幅と高さだけを使用すると、幅と高さは変化しません。 IEではすべて設定されています。

たとえば、背景画像を設定したい場合は、この幅がより重要です。この問題を解決するには、次のようにします:

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


4 IE と幅と高さの問題

IE は min- の定義を認識しませんが、実際には通常の幅と高さをあたかも min があるかのように扱います。これは大きな問題です。通常のブラウザでは幅と高さだけを使用すると、幅と高さは変化しません。 IEではすべて設定されています。

たとえば、背景画像を設定したい場合は、この幅がより重要です。この問題を解決するには、次のようにします:

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


5. ページの最小幅

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

タグの下に

を配置し、その div のクラスを指定して、次のように CSS を設計します: #container{ min-width: 600px ; width:expression(document.body.clientWidth 最初の min-width は通常ですが、2 行目の幅は IE でのみ認識される Javascript を使用しています。また、HTML ドキュメントも形式的ではなくなります。実際にはJavaScriptの判断により最小幅を実装しています。


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

左側のオブジェクトはフローティングで、右側は外側のパッチの左マージンを使用して配置されます。右側のオブジェクト内のテキストは 3 ピクセルになります。左から離れてください。 #box{ float: left; width:800px;}

#left{ float: left; width:50%;}
*html #left{ margin- right:-3px; //この文がキーです }
＜div id="left">＜/div> ;
＜/div>

7. IEのかくれんぼ問題

divアプリケーションが複雑で各列にいくつかのリンクがある場合、この時にDIVのかくれんぼ問題が発生しやすくなります。
一部のコンテンツは表示できません。マウスでこの領域を選択すると、コンテンツが実際にページ上にあることがわかります。 解決策: #layout に line-height 属性を使用するか、#layout に固定の高さと幅を使用します。ページ構造はできるだけシンプルにしてください。
8.float div クロージャ; 適応高さ; このコードはIEでは問題ありませんが、FFでは問題があります。その理由は、NOTfloatC が float ラベルではないため、float ラベルを閉じる必要があるためです。 間に を追加します。同じレベルの div 間にネストされた関係は存在できません。そうでない場合は、例外が発生します。そして、クリアスタイルを次のように定義します: .clear{ clear: Both;}

② 外部ラッパーの div として、高さを自動的に適応させるために、ラッパーに overflow: hidden を追加します。 ; フロートを含むボックスが使用される場合、IE では高さの自動調整が無効になります (邪悪な IE!) 互換性を実現するには、zoom:1 を使用します。
たとえば、ラッパーは次のように定義されます:
.colwrapper{ overflow:hidden;zoom:1; margin:5px auto;}

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

＜div id="right">＜/div>
＜/div> たとえば、3 つの列すべての背景色を青に設定したいとします。左中央右が下に伸びるにつれて、ページは実際には同じ高さを維持していることがわかります。この問題は、ページがフロート属性ではなく、ページを中央に配置する必要があるためフロートに設定できないために発生します。このように解決します
＜div id=”page”>
＜div id=”bg” style=”float:left;width:100%”>
＜div id=”left”>＜/div>
＜div id =”center”>＜/div>

幅100%のDIVを埋め込みます。問題を解決するには


④ユニバーサルフロートクロージャ（非常に重要！）
クリアフロートの原理については、[構造マークアップなしでフロートをクリアする方法]を参照して、グローバルCSSに次のコードを追加し、class="clearfixを追加してください" を閉じる必要のある div に追加します。つまり、はい、繰り返し動作します。
/* Clear Fix */
.clearfix:after { content:"."; display:block; height:0; clear:both; Visibility :hidden; } .clearfix { display:inline-block; }

/* IE Mac から非表示にする */
.clearfix {display:block;}
/* IE Mac から非表示にする */
/* clearfix の終了 * /
または次のように設定します: .hackbox{ display:table; / /オブジェクトをブロック要素レベルでテーブルとして表示します}

９．高さ非適応

高さ非適応とは、特に内層オブジェクトがマージンまたはパディングを使用している場合、内層オブジェクトの高さが変更された場合に、外層の高さを自動的に調整できないことを意味します。
例:

#box {background-color:#eee; }

#box p {margin-top: 20px;margin-bottom: 20px; }

p オブジェクトの内容

解決策: CSS コード: .1{height:0px;overflow:hidden;} または DIV として 2 つの空の div オブジェクトを追加します。プラスボーダー属性。
10. IE6 で画像の下に隙間があるのはなぜですか? このバグを解決するには、HTML のレイアウトを変更したり、img を display:block に設定したり、vertical-align 属性を設定したりすることができます。 align:top lower | text -bottom を解決できます。

テキストとテキスト入力ボックスを追加します。 ;

＜/style>

14. IE が Web 標準でスクロール バーの色を設定できないのはなぜですか? 解決策は、本文を

＜meta http-equiv="Content-Type"

content= "text/html; charset=gb2312" />

1.div はすでに中央に配置されていますmargin-right が auto に設定されている場合、IE は機能しません。IE は、親要素内で body を中央に設定する必要があります。これは、親要素内のコンテンツが中央に配置されることを意味します。

2. リンク (a タグ) の境界線と背景

リンクに境界線と背景色を追加するには、改行がないように、display: block を設定し、float: left を設定する必要があります。メニューバーに関して、a とメニューバーの高さを設定するのは、下端の表示がずれないようにするためです。高さを設定しない場合は、メニューバーにスペースを挿入できます。

3. ハイパーリンクを訪問した後にホバースタイルが表示されない問題

クリックして訪問したハイパーリンクスタイルがホバーしてアクティブにならなくなる問題は、多くの人がこの問題に遭遇したことがあるはずです。 CSS 属性の順序: L-V-H-A

コード:
this.offsetWidth)"> FireFox を IE に対応させる＜/div>

問題の違いはコンテナ全体の幅に境界線の幅が含まれるかどうかです。ここで IE6 は 200PX と解釈しますが、FF は 200PX と解釈します。 200PX、220PXの場合、問題の原因は何ですか?コンテナーの先頭にある xml を削除すると、先頭にあるステートメントが IE の qurks モードをトリガーすることがわかります。qurks モードと標準モードに関する関連情報については、http:// を参照してください。 www.microsoft.com/china /msdn/library/webservices /asp.net/
ASPNETusStan.mspx?mfr=true

IE6、IE7、FF

IE7.0 がリリースされ、CSS サポートに新たな問題が発生しました。多くのブラウザがありますが、 NetBpx; /*IE7 および IE6*/
_height:20px; /*IE6 の場合*/

順序に注意してください。
これも CSS HACK ですが、上記ほど単純ではありません。
#example { color: #333; } /* モズ */
* html #example { color: #666; } /* IE6 */
* html #example { color: #999; }

2 番目の方法は、IE 固有の条件付きコメントを使用する方法です




＜!--[IE 7の場合]>






＜![endif]-->

3番目の方法はcssフィルター方法です。以下は海外のWebサイトからの古典的な翻訳です。

次のように新しい CSS スタイルを作成します:
#item {
width: 200px;
height: 200px;
background: red
}

新しい div を作成し、以前に定義した CSS スタイルを使用します:

some text here＜/div>

body パフォーマンスのここに lang 属性を追加します。中国語は zh:
次に、div 要素の別のスタイルを定義します。
*: lang(en) #item{
background:green ! important;
}

これは、 :lang セレクター ie7.0 がサポートしていないため、この文は元の CSS スタイルを ! important で上書きするために行われます。には何の効果もないため、ie6.0 でも同じ効果が得られますが、残念ながら safari はこの属性をサポートしていないため、次の CSS スタイルを追加する必要があります:
#item:empty {
background: green ! important
}
: 空のセレクターは CSS3 仕様です。Safari はこの仕様をサポートしていませんが、この要素が存在するかどうかに関係なく、IE バージョン以外のブラウザーでは緑色が表示されます。

IE6 および FF との互換性については、前のバージョンを検討してください。重要 個人的には、シンプルで互換性が高い最初のバージョンの方が好きです。