IE 6,IE 7とfirefoxのDIVに対するサポートの違い
3436 ワード
1 firefoxに対して ie 6 ie 7のcssスタイルは今ほとんど使います。impotantはhackに来て、ie 6とfirefoxに対してテストして正常に表示することができて、しかしie 7は正しいです!importは正確に解釈できます。ページが要求通りに表示されなくなります。IE 7に対していいhack方式を見つけたら「*+」を使っています。今はIE 7で閲覧しても大丈夫です。今CSSを書いてもいいです。 { カラー: #333; } /* Moz */ * html #1 { カラー: #666; } /* IE 6 */ *+html #1 { カラー: #999; } /* IE 7 */ では、firefoxでは、フォントの色が_と表示され、IE 6では、フォントの色が龛666と表示され、IE 7では、フォントの色が鰫999と表示される。2 cssレイアウトにおける中居問題の主なスタイルの定義は以下の通りである。 {TEXT-ALIGN: センターセンター { MARGI-RGT: auto; MARGI-LEFT: auto; } 説明:まず親レベルでTEXT-ALIGNを定義する: センターこれは、親レベルの要素の中に内容が中央にあるという意味です。IEに対してはこのように設定すればいいです。しかし、mozilaの中には中に入ることができません。解決策としては、サブ要素定義時に設定する「MARG-RGHT」を追加します。 auto;MARGI-LEFT: auto; ” 説明が必要なのは、この方法でページ全体を中央にしたいなら、一つのDIVにセットしないことをお勧めします。複数のdivを順次に取り外すことができます。各取り外すdivにMARGIN-RGHTを定義すればいいです。 auto;MARGI-LEFT: auto; いいです3 箱の模型は違っています。 width:600 px; //for ie 6.0- w\idth:500 px; //for ff+ie 6.0}荫box{ width:600 pximpotant //for スタッフ width:600 px; //for f+ie 6.0 width /**/:500 px; //for ie 6.0-}4 浮動ieが生み出す二倍の距離 float:left; width:100 px; magin:0 0 0 100 px; //この場合、IEは200 pxの距離を生む。 display:inline; //浮動小数点を無視します。ここでblockとinlineの2つの要素について詳しく説明します。ブロック要素の特徴は、常に新しい行で開始され、高さ、幅、行の高さ、辺の距離を制御できます。Inline要素の特徴は、他の要素と同じ行にあることです。box{ display:block; //埋め込み要素のブロック要素としてモデル化できます。 display:inline; //同じ行を並べる効果を実現します。 diplay:テーブル;5 IEと幅と高さの問題IEはminという定義を認識していないが、実際には正常なwidthとheightをminとして扱う。これで問題が大きくなります。幅と高さだけを使うと、通常のブラウザでこの2つの値は変わりません。ミニwidthとmin-heightだけを使うと、IEの下には幅と高さが設定されていないのに等しいです。背景画像を設定するには、この幅が重要です。この問題を解決するには、こうしてもいいです。 width: 80 px; height: 35 px;html body #box{ width: auto; height: auto; ミニ-width: 80 px; min-height: 35 px;6 ページの最小幅min-widthは非常に便利なCSSコマンドであり、要素の最小値を指定しても、幅より小さくてもいけません。しかし、IEはこれを認識していません。 widthを最小幅として使う。このコマンドをIEでも使えるようにするために、一つの<div>を使ってもいいです。 挿入 ラベルの下に、divのクラスを指定します。そしてCSSはこう設計します。 ミニ-width: 600 px; width:expression(document.body.client Width) < 600ですか "600 px": "atot" ); } 最初のミニwidthは正常です。しかし、2行目のwidthはJavascriptを使っています。これはIEでしか認識できません。これもあなたのHTML文書があまり正規ではありません。それは実際にJavascriptの判断によって最小幅を実現します。7 フローティングをクリアします。 display:テーブル;/対象をブロックの要素レベルの表として表示するか、または。 clear:both;あるいは参加します:after(偽の対象)、対象の後で発生する内容を設定して、通常contentと協力して使って、IEはこの偽りの対象を支持しないで、Ieではありません。 ブラウザはサポートしていますので、IE/WINブラウザに影響はありません。このような一番厄介なのは……荫box:after{ content: "."; display: block height: 0; clear: ボス visibility: hidden;8 DIVフロートIEテキストは、3ピクセルのバグを生成し、左のオブジェクトを浮動させ、右のパッチを採用した左の距離に位置し、右のオブジェクト内のテキストは左の3 pxの間隔になります。 float:left; width:800 px;left{ float:left; width:50%ナイト{ width:50%html #left{ magin-right:-3 px; //この文はキーです。HTMLコード
9 属性セレクタ(これは互換性とは言えません。cssを隠している一つのバグです。)p[id]{}div[id]{}p[id]}{id}これはIE 6.0とIE 6.0以下のバージョンには隠れています。すべてのpタグの中にidがあるのは同じです。 IE鬼ごっこの問題 divアプリが複雑な場合は、各欄にリンクがあります。DIVなどの場合は鬼ごっこの問題が発生しやすいです。一部の内容は表示されません。マウスでこの領域を選択すると、発見された内容は確かにページにあります。解決方法:オンライン-height属性を使用する または萼layoutに固定高さと幅を使用します。ページ構造はできるだけ簡単です。11 高さが合わない 高度不適合は、内部層のオブジェクトの高さが変化すると、外層の高さが自動的に調節できなくなり、特に内部層のオブジェクトがmaginを使用する場合には、 またはpaddign 時です。例:
pオブジェクトの内容 CSS:荫box {background-カラー:eee; } #ボックス p {magin-top: 20 px;magin-bottom: 20 px; text-align:センター } 解決方法:Pオブジェクトにそれぞれ2つの空きを追加するdivオブジェクトCSSコード:1{height:0 px;overflow:hidden;またはDIVにborder属性を追加します。