div+css は、ie6、ie7、ie8、ie9、FireFox Chrome、およびその他のブラウザーと互換性があります。method_html/css

ホームページ

ウェブフロントエンド

htmlチュートリアル

div+css は、ie6、ie7、ie8、ie9、FireFox Chrome、およびその他のブラウザーと互換性があります。method_html/css_WEB-ITnose

Jun 24, 2016 pm 12:30 PM

div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器方法

1.DOCTYPE 影响 CSS 处理

2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行

3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中

4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width

5.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式

6.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行

7.cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以

8.FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。

9.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法： div{margin:30px!important;margin:28px;}注意这两个margin的顺序一定不能写反，据阿捷的说法! important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样： div{maring:30px;margin:28px}重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx! important;

11.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义 ul{margin:0;padding:0;}就能解决大部分问题

注意事项：

1、float的div一定要闭合。

例如：(其中floatA、floatB的属性已经设置为float:left;)

这里的NOTfloatC并不希望继续平移，而是希望往下排。

这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。

在

之间加上

这个div一定要注意声明位置，一定要放在最恰当的地方，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。

并且将clear这种样式定义为为如下即可：

.clear{

clear:both;

}

此外，为了让高度能自动适应，要在wrapper里面加上overflow:hidden;

当包含float的box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE)用zoom:1;可以做到，这样就达到了兼容。

例如某一个wrapper如下定义：

.colwrapper{

overflow:hidden;

zoom:1;

margin:5px auto;}

2、margin加倍的问题

设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。

解决方案是在这个div里面加上display:inline;

例如：

対応する CSS は

#IamFloat{

float:left;/*IE は 10px として認識します*/

display:inline;/* IE では、5px*/} として理解されます

3. コンテナの包含関係について

多くの場合、特にコンテナ内に 2 つまたは 3 つの float div がある場合、幅は問題が発生しやすいです。 IE では、外側の層の幅は、より広い内側の div によって圧迫されます。ピクセルレベルの精度で測定するには、必ず Photoshop または Firework を使用してください。

4. 高さに関する質問

コンテンツが動的に追加される場合は、高さを定義しないことが最善です。ブラウザは自動的に拡大縮小できますが、静的コンテンツの場合は高さを設定するのが最善です。 (時々自動的に開かないようです。何が起こっているのかわかりません。)

5. 最も無慈悲な方法 - !重要

いくつかの詳細な問題を解決する方法が本当にない場合は、次の方法があります。このメソッドを使用します。「!重要」の FF は最初に自動的に解析されますが、IE はそれを無視します。次のようになります。 gif) no-repeat 0px 0px ! important ; /*FF のスタイル*/

background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* IE のスタイル */}

注意すべき点は、文 xxxx !重要な文を別の文の上に配置することについては、上で説明したとおりです

IE7.0 の CSS サポートには新たな問題があります。ブラウザの数が増え、Web ページの互換性も悪くなっています。IE7.0 の互換性の問題を解決するために、次の記事を見つけました。今はそれを使用しています。ほとんど! important はハッキングするため、ie6 と Firefox のテストでは正常に表示されますが、ie7 では ! important を正しく解釈できるため、ページが必要に応じて表示されなくなります。検索した結果、「*+html」を使用するという IE7 用の良いハックを見つけました。これで IE7 で閲覧できるようになりました。問題はありません。

これで次のような CSS を書くことができます:

#example { color: #333; } /* Moz */

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

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

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

CSS のさまざまなブラウザとの互換性については、インターネット上にチュートリアルが存在します。以下の内容は、あまり目新しいものではなく、純粋に個人的なまとめです。初心者向けのヘルプがあります

1. CSS HACK

1、! important

IE7 の ! important メソッドのサポートにより、次の 2 つの方法で解決できます。現在は IE6 HACK のみです (記述に注意してください。宣言位置は事前に指定する必要があることに注意してください)。 * IE7+FF */

width: 80px; /* IE6 */

}

</style>

2、IE6/IE77 対 Firefox

*+htmlと *html は IE タグに固有であり、Firefox はまだサポートしていません。また、*+html は IE7 に固有のタグです。 120px; } /* FireFox */

*html #wrapper { width: 80px;} /* ie6 修正 */

*+html #wrapper { width: 60px;} /* ie7 修正、順序に注意 * /

}

</style>

注: IE7 の

*+html HACK では、HTML の先頭に次のステートメントが必ず含まれるようにする必要があります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 1 Transitional// JA" "http://www.w3.org/TR/html4/loose.dtd">

フロートをクリアする原理については、[構造マークアップを使用せずにフロートをクリアする方法]を参照してください。

グローバルCSSに次のコードを追加し、閉じる必要があるdivにclass="clearfix"を追加します。
これは毎回機能します。

<style>

/* クリア修正 */

.clearfix:after

{

content:"

;

ディスプレイ:ブロック;

高さ:0 ;

: 両方;

visibility:hidden;

}

.clearfix

{

display:inline-block;

}

/* IE Mac から隠す */

.clearfix {display:block;}

/* IE Mac からの非表示の終了 */

/* Clearfix の終了 */

3. div のパディングを設定した後FF幅と高さは増加しますが、IE では増加しません (!重要)

2、中央揃えの問題。行の高さを現在の div と同じ高さに設定します。次に、vertical-align : middle を使用します。(コンテンツを折り返さないように注意してください。)

2) 水平方向に中央揃えにします。(もちろん全能ではありません)

3. a タグ内のコンテンツには、display: block;(ナビゲーションタグでよく見られます) を設定する必要があります。

4、FF と IE の BOX の理解の違いにより、2px の違いや div のマージンなどの問題が発生しますIEではfloat倍増に設定します

5、FFの下のulタグはデフォルトでリスト形式であり、不要なトラブルを避けるために事前に宣言することをお勧めします。外部ラッパーとして、オーバーフロー: 非表示を追加するのが最善です。

ハンドカーソルについては、ポインターのみに適用されます。 IE

Firefox ie6 ie7 用の CSS スタイル

現在、ほとんどの IE はハッキングに ! important を使用していますが、Firefox でのテストは正常に表示できます

しかし、ie7 は ! important を正しく解釈できます。必要に応じてページが表示されないようにします。ピンを見つけました

IE7 の優れたハックは、「*+html」を使用することです。IE7 でブラウズしても問題はありません。

これで次のような CSS を書くことができます:

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

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

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

すると、フォントの色は、Firefox では #333、IE6 では #666、IE7 では # 999 と表示されます。 CSSレイアウトの中心問題LEFT: auto; }

手順:

まず、親要素の TEXT-ALIGN: center を定義します。これは、IE の場合、親要素のコンテンツが中央に配置されることを意味します。ただし、mozilla の中心に置くことはできません。解決策は、子要素を設定するときに「MARGIN-RIGHT: auto;MARGIN-LEFT: auto;」を追加することです。この方法を使用してページ全体を中央に配置したい場合は、設定しないことをお勧めします。 DIV では、複数の div を順番に分割できます。分割された各 div で MARGIN-RIGHT: auto;MARGIN-LEFT: auto; を定義するだけです。

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

#box{ //for ie6.0- width:500px; //for ff+ie6.0}

# box{ width:600px! important //ff の場合 width:600px; //ff+ie6.0 の場合 width /**/:500px; //ie6.0-}

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

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

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

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

diplay:table;

IE は min- の定義を認識しませんが、実際には通常の幅と高さを min があるかのように扱います。これは大きな問題を引き起こします。幅と高さだけを使用すると、

これら 2 つの値は通常のブラウザでは変更されません。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放到body 标签下，然后为div指定一个类：

然后CSS这样设计：

#container{ min-width: 600px; width:expression(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]{}

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

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

10 IE捉迷藏的问题

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

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

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

11 高度不适应

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

margin 或paddign 时。

例：

<p>p对象中的内容</p>

</div>

CSS: #box {background-color:#eee; }

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

*/*IE と Firefox の CSS 互換性 Daquan*/

1.DOCTYPE は CSS 処理に影響します

2.ff: DIV 設定 Margin-heft、margin-right は中央にあります

3. FF: body が text-align を設定するとき、div は margin: auto (主に margin-left、margin-right) を中央に設定する必要があります

4.FF: パディングを設定した後、div は高さと幅を増やしますが、 IE ではサポートされないため、追加の高さと幅を設定するには ! important を使用する必要があります

5.FF: ! important をサポートしますが、IE はそれを無視します。 ! important を使用して FF の特別なスタイルを設定できます

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

7.cursor: ポインターは IE FF でカーソルの指の形を同時に表示できますが、手は IE でのみ使用できます

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

9. mozilla Firefox と IE の BOX モデルの解釈に一貫性がないため、2 ピクセルの違いが生じます。解決策:

div{margin:30px! important;margin:28px;}

これらの順序に注意してください。 Ajie 氏によれば、! important 属性は IE では認識できないが、他のブラウザでは認識できるという。実際、IE では次のように解釈されます:

div{maring:30px;margin:28px}

定義を繰り返すと、最後の定義に従って実行されるため、単に margin:XXpx と書くことはできません!重要;

10. IE5 と IE6 の BOX 解釈は矛盾しています

IE5 では

div{width:300px;margin:0 10px 0 10px;}

div の幅は 300px- として解釈されます。最終的に 10px (右パディング) - 10px (左パディング) div の幅は 280px ですが、IE6 などのブラウザでは幅は 300px+10px (右パディング) + 10px (左パディング) = 320px として計算されます。現時点では、次の変更を行うことができます

div{width:300px! important;width /**/:340px;margin:0 10px 0 10px}

これについて/**/ IE5 と Firefox がサポートしていることしかわかりませんが、IE6 はサポートしています。そうではありません。誰かが理解したら、教えてください、ありがとう！ :)

11.ul タグは Mozilla ではデフォルトでパディング値を持っていますが、IE ではマージンのみが値を持っているので、最初に定義してください

ul{margin:0;padding:0;}

はそれを解決できます問題点

注:

1. float div を閉じる必要があります。

：例: (Floata、Floatb の属性は flow に設定されています:)

& & & lt; #div id = "floata" & gt; & lt ;#div id="floatB" ></#div>

<#div id="NOTfloatC" ></#div>

ここの NOTfloatC はパンを続けたくありません。でも前に進みたい下段。

このコードは IE では問題ありませんが、問題は FF にあります。その理由は、NOTfloatC が float ラベルではないため、float ラベルを閉じる必要があるためです。

<#div class="floatB"></#div>

<#div class="NOTfloatC"></#div>

追加

<#div class="clear"></#div>

この div は宣言位置に注意し、最も適切な場所に配置し、次の 2 つの div と組み合わせる必要があります。 float 属性同じレベルの div 間にネストされた関係は存在できません。そうでない場合は、例外が発生します。

そしてクリアスタイルを次のように定義します:

.clear{

clear:both;}

さらに、高さを自動的に調整できるようにするには、ラッパーに overflow:hidden; を追加します。

ボックスにフロートが含まれる場合、このとき、IE のレイアウトのプライベート属性は無効になります。 IE を起動する必要があります (邪悪な IE!) 互換性を実現するには、zoom:1 を使用します。

たとえば、ラッパーは次のように定義されます:

.colwrapper{

overflow:hidden;

margin:5px auto;}

2。

IE でフローティングに設定された div に設定されたマージンは 2 倍になります。これはie6に存在するバグです。

解決策は、display:inline; を追加することです

例:

<#div id="imfloat"></#div>

対応する CSS は

#IamFloat{

float:left;

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

display:inline;/*IE では次のように認識されます5px* /}

3. コンテナの包含関係について

多くの場合、特にコンテナ内に 2 つまたは 3 つの float div が並列レイアウトされている場合、幅が大きくなる傾向があります。問題。 IE では、外側の層の幅は、より広い内側の div によって圧迫されます。ピクセルレベルの精度で測定するには、必ず Photoshop または Firework を使用してください。

4. 高さの問題について

コンテンツを動的に追加する場合は、高さを定義しないことが最善です。ブラウザは自動的に拡大縮小できますが、静的コンテンツの場合は高さを設定するのが最善です。 (自動的に開かない場合もあるようです。何が起こっているのかわかりません)

5. 最も無慈悲な方法 - !重要; いくつかの問題を解決する方法が本当にない場合この方法では、FF は最初に「! important」を自動的に解析しますが、IE は次のように無視します。 ) no-repeat 0px 0px ! important ; /*FF のスタイル*/

background:url(/res/images/up/tab1.gif) no-repeat 1px 0px /* IE のスタイル */}

div+css 互換 (2 つ)

2008 年 4 月 2 日水曜日 10:58 AM

DIV+CSS 互換 IE6 IE7 Firefox

最も一般的に使用される方法Firefox と IE を区別する場合は!重要な方法です。他の異なるブラウザやブラウザの異なるバージョンとの互換性の問題を解決するために、以下のいくつかの方法があります: @import、アノテーション、属性セレクター、サブオブジェクトセレクター、音声これらのメソッドは「CSS」にあります

以下は IE と Firefox の間の CSS 互換性の問題です

1.DOCTYPE は CSS 処理に影響します

2.FF: div 設定 margin-left、margin -right は auto のときすでに中央に配置されていますが、IE は動作しません

3.FF: body が text-align に設定されている場合、div を設定する必要がありますmargin: auto (主に margin-left、margin-right) を中央に配置します

4.FF: パディングを設定した後、div は高さと幅を増加させますが、IE は増加しないので、設定するには ! important を使用する必要があります。追加の高さと幅

5.FF: !重要、IE は無視します、利用可能 !重要 FF 用に特別にスタイルを設定します

この記事は Zoku.com - pwdesign によるオリジナルです。この情報は保存してください。再版のご協力ありがとうございます。

このウェブサイトの声明

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