div の位置ずれ/IE6、IE7、IE8 のスタイルの非互換性問題を解決_html/css_WEB-ITnose

「FLOAT: LEFT」を使用した DIV は IE8 と IE7 では正常に機能しますが、IE6 では下に移動して空白で表示されます。これは、IE6 が使用するカーネルがデフォルトで DIV 間の距離を 3 ～ 5 PX 増加させるためです。そのため、移動した DIV の STYLE に「margin-left:-5px;」以下を追加してみてください。
IE7 と IE8 の間のスタイルの非互換性の問題を解決します

方法 1: 次の HTTP メタタグをページに追加します:

IE8 がこのタグを読み取るとすぐに、IE7 互換モードが自動的に開始され、ページが完全に表示されます。

方法 2: Web サイト全体に対して、次の記述子を IIS に追加すると、同じ効果が得られます。

Firefox IE6 IE7のCSSスタイルを解決する IE7の互換性問題

テーマ作成で一番困るのはCSSスタイルの互換性です。 ブラウザごとにccsの解釈が異なるため、IE7では正常に表示されますが、しかし、Firefox や ie6 などの他のブラウザでは、位置ずれや沈み込みが発生します。デバッグのために Firefox、ie6、ie7 を頻繁に切り替えなければなりません。ため息がつきます。最近、さらに 2 つのブラウザが Google Chrome と IE8 に加わったようです。特定のブラウザが世界を支配する見込みはありません。互換性の問題を克服するよう努めるしかありません。 互換性の問題を解決する記事を見つけることは依然として非常に効果的です。

1 Firefox ie6 ie7 用の CSS スタイル

現在、ほとんどの場合、ハッキングに ! important が使用されています。ie6 および Firefox のテストでは正常に表示されますが、ie7 では ! important を正しく解釈できるため、ページが表示されなくなります。要求に応じ！ 「*+html」を使用する IE7 用の良いハックを見つけました。次のように CSS を記述します。

#1 { color: #333;

* html #1 { color: #666; } /* IE6 */

*+html #1 { color: #999; } /* IE7 */

すると、Firefox 上のフォントの色は #333 と表示されます。 IE6 フォントの色は、IE7 では #666、IE7 では #999 です。

2 CSS レイアウトのセンタリングの問題

主なスタイル定義は次のとおりです:

body {TEXT-ALIGN: center;}

#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }

手順:

まず、親要素の TEXT-ALIGN: center を定義します。これは、IE の場合、親要素のコンテンツが中央に配置されることを意味します。

しかし、mozilla の中心に置くことはできません。解決策は、「MARGIN-RIGHT: auto;MARGIN-LEFT: auto;」を追加することです

このメソッドを使用してページ全体を中央に配置したい場合は、このメソッドを使用しないことをお勧めします。 DIV では、複数の div を順番に分割できます。分割された各 div で MARGIN-RIGHT: auto;MARGIN-LEFT: auto; を定義するだけです。

3 ボックス モデルのさまざまな解釈。

#box{

width:600px;

//for ie6.0- width:500px;

//for ff+ie6.0

}

# box{

width:600px!重要

//ff

の場合

width:600px;

//ff+ie6.0の場合

width /**/:500px;

//ie6.0の場合-

}

4 フローティング IE によって生成される 2 倍の距離

#box{ float:left; width:100px; margin:0 0 0 100px; この場合、IE は 200px の距離を生成します。 / float を無視する}

2 つの要素 block と inline について詳しく説明します。 Block 要素の特徴は、常に新しい行で始まり、高さ、幅、行の高さ、およびマージンをすべて制御できることです。 (ブロック要素); インライン要素 特徴は次のとおりです: 他の要素と同じ行にある...制御不可能 (インライン要素); // インライン要素をブロック要素としてシミュレートできます。 //同じ行を実現 配置の効果 diplay:table;

5 IEと幅と高さの問題

IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏 览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。比如要设置背景图片，这个宽度是 比较重要的。要解决这个问题，可以这样：

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

6 页面的最小宽度

min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把 width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个

放到 标签下，然后为div指定一个类：

然后CSS这样设计：

#container{

min-width: 600px;

width:e­xpression(document.body.clientWidth < 600? “600px”: “auto” );

}

第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

7 清除浮动

.hackbox{

display:table;

//将对象作为块元素级的表格显示

}

或者

.hackbox{

clear:both;

}

或者加入:after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，所以并不影响到IE/WIN浏览器。这种的最麻烦的

……#box:after{

content: “.”;

display: block;

height: 0;

clear: both;

visibility: hidden;

}

8 DIV浮动IE文本产生3象素的bug

左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.

#box{

float:left;

width:800px;}

#left{

float:left;

width:50%;}

#right{

width:50%;

}

*html #left{

margin-right:-3px;

//这句是关键

}

HTML代码

9 属性选择器(这个不能算是兼容,是隐藏css的一个bug)

p[id]{}div[id]{}

p[id]{}div[id]{}

这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用

属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

10 IE捉迷藏的问题

当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。

有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。

解决办法：对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。

11 高度不适应

高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用

margin 或paddign 时。例：

p对象中的内容

CSS:

#box {background-color:#eee; }

#box p {margin-top: 20px; text-align:center; }

解決策: in Pオブジェクトの上下に 2 つの空の div オブジェクト CSS コード: .1{height:0px;overflow:hidden;} または、DIV に border 属性を追加します。

注: IE は * を認識できますが、標準ブラウザ (FF など) は * を認識できません。 * ただし、注意してください!重要;

IE8、IE7、都無しでは「FLOAT：LEFT」の DIV が採用されており、IE6 以降では下方向への移動が発生し、空白が表示されます。これは、IE6 が使用するカーネルがデフォルトで DIV 間の距離を 3 ～ 5 PX 増加させるためです。そのため、移動した DIV の STYLE に「margin-left:-5px;」以下を追加してみてください。

IE7 と IE8 の間のスタイルの非互換性の問題を解決します

方法 1: 次の HTTP メタタグをページに追加します:

IE8 がこのタグを読み取るとすぐに、IE7 互換モードが自動的に開始され、ページが完全に表示されます。

方法 2: Web サイト全体に対して、次の記述子を IIS に追加すると、同じ効果が得られます。

Firefox ie6 ie7のcssスタイルを解決する ie7の互換性問題

テーマ作成で一番困るのはCSSスタイルの互換性です。ブラウザごとにccsの解釈が異なるため、IE7では正常に表示されます、しかし、Firefox や ie6 などの他のブラウザでは、位置ずれや沈み込みが発生します。問題は、デバッグのために Firefox、ie6、ie7 を常に切り替える必要があることです。最近、さらに 2 つのブラウザが Google Chrome と IE8 に加わりました。特定のブラウザが世界を支配することは望めないようです。互換性の問題を克服するよう努めるしかありません。 互換性の問題を解決する記事を見つけることは依然として非常に効果的です。

1 Firefox ie6 ie7 用の CSS スタイル

現在、ほとんどの場合、ハッキングに ! important が使用されています。ie6 および Firefox のテストでは正常に表示されますが、ie7 では ! important を正しく解釈できるため、ページが表示されなくなります。要求に応じ！ 「*+html」を使用する IE7 用の良いハックを見つけました。IE7 で参照すると、次のような CSS を書くことができます。

#1 { color: #333; /* Moz */

* html #1 { color: #666; } /* IE6 */

*+html #1 { color: #999; } /* IE7 */

すると、Firefox 上のフォントの色は #333 と表示されます。 IE6 フォントの色は、IE7 では #666、IE7 では #999 です。

2 CSS レイアウトのセンタリングの問題

主なスタイル定義は次のとおりです:

body {TEXT-ALIGN: center;}

#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }

手順:

まず、親要素の TEXT-ALIGN: center を定義します。これは、IE の場合、親要素のコンテンツが中央に配置されることを意味します。

しかし、mozilla の中心に置くことはできません。解決策は、「MARGIN-RIGHT: auto;MARGIN-LEFT: auto;」を追加することです

このメソッドを使用してページ全体を中央に配置したい場合は、このメソッドを使用しないことをお勧めします。 DIV では、複数の div を順番に分割できます。分割された各 div で MARGIN-RIGHT: auto;MARGIN-LEFT: auto; を定義するだけです。

3 ボックス モデルのさまざまな解釈。

#box{

width:600px;

//for ie6.0- width:500px;

//for ff+ie6.0

}

# box{

width:600px!重要

//ff

の場合

width:600px;

//ff+ie6.0の場合

width /**/:500px;

//ie6.0の場合-

}

4 フローティング IE によって生成される 2 倍の距離

#box{ float:left; width:100px; margin:0 0 0 100px; この場合、IE は 200px の距離を生成します。 / フロートを無視する}

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

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

5 IE と幅と高さの問題

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

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

6 ページの最小幅

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

を配置し、その div のクラスを指定します。

その場合、CSS は次のように設計されます:

#container {

min -width: 600px;

width:expression(document.body.clientWidth

}

最初の min-width は通常ですが、行 2 IE のみが認識できる Javascript が使用されているため、HTML ドキュメントの形式が緩和されます。実際にはJavaScriptの判断により最小幅を実装しています。

7クリアフロート

.hackbox{

display：table; }

または、 after (擬似オブジェクト) を追加して、オブジェクトの後に発生するコンテンツを設定します。通常、IE はこの擬似オブジェクトをサポートしておらず、Ie ブラウザーでもサポートされていないため、影響しません。 IE/WINブラウザ。これが一番面倒です

......#box:after{

content: ".";

display: block;

height: 0;

clear: Both;

visibility: hidden;

}

8 DIV フローティング IE テキストにより 3 ピクセルのバグが発生します

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

#box{

float :left;

width:800px;}

#left{

float:left;

width:50%;}

#right{

width: 50%;

}

*html #left {

margin-right:-3px;

//この文が鍵です

}

HTML コード

< ;DIV id=left>

9 属性セレクター (これは互換性がありません。CSS を非表示にする際のバグです) )

p[id]{}div[id] {}

p[id]{}div[id]{}

これは IE6.0 以降のバージョンでは非表示になっており、FF と OPera では動作します

属性セレクターとサブセレクターの間にはまだ違いがあります。サブセレクターの範囲は形式的には狭められていますが、属性セレクターの範囲は比較的広く、たとえば、p[id] では、すべての p タグが ID 付きです。

10 IEのかくれんぼ問題

場合 divアプリケーションが複雑な場合、各列にいくつかのリンクが存在する場合、DIVではかくれんぼ問題が発生しやすくなります。

一部のコンテンツは表示できません。マウスでこの領域を選択すると、コンテンツが実際にページ上にあることがわかります。

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

11 高さ非適応

高さ非適応とは、特に内層オブジェクトが

margin または Paddign を使用している場合、内層オブジェクトの高さが変更された場合に、外層の高さを自動的に調整できないことを意味します。例:

p オブジェクトの内容

CSS:

#box {background-color: # eee; }

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

解決策: P オブジェクトの CSS コード: 1{height の上下に 2 つの空の div オブジェクトを追加します。 :0px;overflow:hidden;}または、DIV に border 属性を追加します。

注: IE は * を認識できます。標準ブラウザ (FF など) は * を認識できません。

IE6 は * を認識できますが、!重要です

IE7 は * と ! important の両方を認識できます。

FF は認識できません。 *、ただし !重要;

は認識できます

声明：

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