1.DOCTYPE は CSS 処理に影響します
2.FF: margin-left と margin-right が auto に設定されている場合、div はすでに中央に配置されていますが、IE は動作しません
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 の垂直方向のセンタリングの問題に合わせてスタイルを設定できます。 DIV 全体と同じ高さ line-height:200px; テキストを垂直方向に中央揃えで挿入します。欠点は、折り返さずにコンテンツを制御する必要があることです。 7.カーソル: IE FF でカーソルの指の形を同時に表示できます。 8.FF: 境界線と背景色を追加します。リンクには、display: block と float: left を設定する必要があります。改行がないことを保証します。メニューバーに関して、a とメニューバーの高さを設定するのは、下端の表示がずれないようにするためです。高さを設定しない場合は、メニューバーにスペースを挿入できます。
9. Mozilla Firefox と IE の BOX モデルの解釈に一貫性がないため、2px の違いが生じます。 解決策: div{margin:30px! important;margin:28px;} これら 2 つのマージンの順序を逆に記述してはいけないことに注意してください。 、Ajie 氏によると、重要です この属性は IE では認識されませんが、他のブラウザーでは認識されます。したがって、IE では実際には次のように解釈されます。 div{maring:30px;margin:28px} が繰り返し定義されている場合、最後の定義に従って実行されるため、単に margin:XXpx と記述することはできません。タグは Mozilla ではデフォルトで存在します パディングには値がありますが、IE ではマージンのみが値を持つため、最初に ul{margin:0;padding:0;} を定義することでほとんどの問題を解決できます
注意:
1. float div を閉じる必要があります。
例: (floatA と floatB の属性が float:left; に設定されている場合)
<#div id=”floatA” >
<#div id=”floatB” >
<#div id=”NOTfloatC” >
ここでの NOTfloatC はパンを継続する必要はありませんが、下方向に配置する必要があります。
このコードはIEでは問題ありませんが、FFでは問題があります。その理由は、NOTfloatC が float ラベルではないため、float ラベルを閉じる必要があるためです。
<#div class= を
<#div class=”floatB”> の間に追加します
<#div class=”NOTfloatC”> ;
この div は宣言の位置に注意し、float 属性を持つ 2 つの div と同じレベルに配置する必要があります。それらの間にネストされた関係はありません。そうでない場合は例外が生成されます。
そして次のようにクリアスタイルを定義します:
.clear{
clear:both;
}
さらに、高さが自動的に適応できるようにするために、
float が含まれる場合、ボックスを使用する場合、高さの自動調整は IE では無効です。現時点では、IE のレイアウトのプライベート属性をトリガーする必要があります (IE が悪い!) 互換性を実現するには、zoom:1; を使用できます。
たとえば、ラッパーは次のように定義されます:
.colwrapper{
overflow:hidden;
margin:5px auto;}
2. float に設定された div は次のようになります。 IEで設定 マージンが2倍になります。これはie6に存在するバグです。
解決策は、display:inline; を追加することです
例:
<#div id=”imfloat”>
対応する CSS は
#IamFloat{
float :left;
margin:5px;/*IEでは10pxとして理解されます*/
display:inline;/*IEでは5pxとして理解されます*/}
3. コンテナの包含関係について
特に多いです。コンテナ内 2 つまたは 3 つの float div などの並列レイアウトがある場合、幅に問題が発生しやすくなります。 IE では、外側の層の幅は、より広い内側の div によって圧迫されます。ピクセルレベルの精度で測定するには、必ず Photoshop または Firework を使用してください。
4. 高さの問題について
コンテンツが動的に追加される場合は、高さを定義しないことが最善です。ブラウザは自動的に拡大縮小できますが、静的コンテンツの場合は高さを設定するのが最善です。 (時々自動的に開かないようです。何が起こっているのかわかりません。)
5. 最も無慈悲な方法 - !重要
いくつかの詳細な問題を解決する方法がない場合は、これを使用できます。
.tabd1{
background:url(/res/images/up/tab1.gif) no-repeat 0px 0px のように、最初に自動的に解析されます。 !重要; /*FF のスタイル*/
background:url(/res/images/up/tab1.gif) no-repeat 1px 0px /* IE のスタイル */}
xxxx !重要な文は別の文の上に配置する必要があることに注意してください。
IE7.0 がリリースされ、CSS サポートに新たな問題が発生しました。ブラウザの数が増え、Web ページの互換性が悪化しています。IE7.0 の互換性の問題を解決するために、次の記事を見つけました。
現在、IE6 の場合は ! important を使用しています。 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 現在のほぼすべての HACK を解決できます。 important メソッドは IE6 の HACK のみになりました (記述に注意してください。宣言位置は事前に指定する必要があることに注意してください)。
2、IE6/IE77 for FireFox
*+html および *html は、IE 固有のタグです。そして *+html は IE7 固有のタグです
注: IE7 には
*+html HACK が必要ですHTML の先頭に次のステートメントがあることを確認してください:
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/ html4/loose.dtd">
2. ユニバーサルフロートクロージャ
クリアについて フロートの原理は[構造マークアップを使用せずにフロートをクリアする方法]を参照してください
グローバルCSSに次のコードを追加し、class="clearfixを追加します" 閉じる必要のある div に追加します。繰り返し動作します。
3. その他の互換性に関するヒント
1. FF の下の div にパディングを設定すると幅と高さが増加しますが、IE では増加しません。 (!重要で解決できます)
2. 中央揃えの問題。
1) line-height を現在の div と同じ高さに設定し、vertical-align: middle を使用します。
2). margin: 0 auto; (もちろん万能ではありません)
3. a タグにコンテンツを追加する必要がある場合は、display: block を設定する必要があります。
4. FF と IE の間の BOX の理解の違いは 2px の違いにつながります。また、IE では float に設定された div のマージンが 2 倍になるなどの問題もあります。 FFにはデフォルトでlist-styleとpaddingがあり、不要なトラブルを避けるために事前に宣言するのが最善です。 (ナビゲーションタグとコンテンツリストに共通)
6. divの高さを外部ラッパーとして設定しないでください。
ハンド カーソル: ポインタについては、オーバーフローを追加するのが最適です。 ie6 と 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。
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- w\idth:500px; //for ff+ie6.0}
#box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}
4 浮动ie产生的双倍距离
#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}
这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,...不可控制(内嵌元素);
#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果 diplay:table;
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放到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 时。
例：
CSS: #box {background-color:#eee; }
#box p {margin-top: 20px; text-align:center; }
解決策: P オブジェクトの上と下に追加します。 2 空の div オブジェクト CSS コード: .1{height:0px;overflow:hidden;} または DIV に border 属性を追加します。
/*IE と Firefox 間の CSS 互換性*/
1.DOCTYPE は CSS 処理に影響します
2.FF: margin-left と margin-right が auto に設定されている場合、div はすでに中央に配置されていますが、IE は機能しません
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; 行間隔 Line-height:200px を DIV 全体と同じ高さにすると、テキストが垂直方向に中央揃えになります。欠点は、ラップせずにコンテンツを制御する必要があることです。
7.cursor: ポインターは IE FF でカーソルの指の形を同時に表示できますが、手は IE でのみ使用できます
8.FF: リンクは境界線を追加します。と背景色を設定するには、display: block を設定する必要があります。同時に float: left を設定すると、改行がないことが保証されます。メニューバーに関して、a とメニューバーの高さを設定するのは、下端の表示がずれないようにするためです。高さを設定しない場合は、メニューバーにスペースを挿入できます。
9. Mozilla Firefox と IE の BOX モデルの解釈に一貫性がないため、2 ピクセルの違いが生じます。 解決策:
div{margin:30px! important;margin:28px;}
これら 2 つのマージンの順序を変更しないでください。 A Jie 氏によれば、属性 ! important は IE では認識されませんが、他のブラウザでは認識されるそうです。つまり、IE では実際には次のように解釈されます:
div{maring:30px;margin:28px}
定義を繰り返すと、最後の定義に従って実行されるため、単に margin:XXpx! important と書くことはできません
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 の属性は float:left; に設定されています)
<#div id="floatA" >
<#div id="floatB" >
<#div id="NOTfloatC" >
ここの NOTfloatC はパンを継続する必要はありませんが、下方向に配置する必要があります。
このコードはIEでは問題ありませんが、問題はFFにあります。その理由は、NOTfloatC が float ラベルではないため、float ラベルを閉じる必要があるためです。
の間に
<#divクラスを追加します
<#div class="floatB">
<#div class="NOTfloatC"> ">
この div は宣言位置に注意する必要があります。最も適切な場所に配置する必要があり、float 属性を持つ 2 つの div と同じレベルにある必要があります。それらの間にネストされた関係がある場合、例外が生成されます。
そしてクリアスタイルを次のように定義します:
.clear{
clear:both;}
さらに、高さを自動的に適応させるために、overflow:hidden; を追加します
ボックスに float が含まれる場合、このとき高さはIE では自動適応は無効です。このとき、IE のレイアウト プライベート属性をトリガーする必要があります (邪悪な IE!) 互換性を確保するには、zoom:1; を使用します。
たとえば、ラッパーは次のように定義されます:
.colwrapper{
overflow:hidden;
margin:5px auto;}
2. マージンを 2 倍にする問題。
IE でフローティングに設定された div に設定されたマージンは 2 倍になります。これはie6に存在するバグです。
解決策は、display:inline; を追加することです
例:
<#div id="imfloat">
対応する CSS は
#IamFloat{
float:left;
margin:5px;/*IE では 10px として認識されます*/
display:inline;/*IE では 5px として認識されます* /}
3 、コンテナの包含関係について
多くの場合、特にコンテナ内に 2 つまたは 3 つの float div などの並列レイアウトがある場合、幅に問題が発生しやすくなります。 IE では、外側の層の幅は、より広い内側の div によって圧迫されます。ピクセルレベルの精度で測定するには、必ず Photoshop または Firework を使用してください。
4. 高さの問題について
コンテンツを動的に追加する場合は、高さを定義しないことが最善です。ブラウザは自動的に拡大縮小できますが、静的コンテンツの場合は高さを設定するのが最善です。 (時々自動的に開かないようです。何が起こっているのかわかりません)
5. 最も無慈悲な方法 - !重要
いくつかの詳細な問題を解決する方法がない場合は、次の方法を使用できます。このメソッドでは、「 ! important 」の FF が最初に自動的に解析されますが、IE は次のように無視します。
background:url(/res/images/up/tab1.gif) 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分
IE6 IE7 Firefox と互換性のある DIV+CSS
Firefox と IE を区別するときに最も一般的に使用される方法は、他の異なるブラウザーや異なるバージョンの互換性の問題のための !重要な方法です。ブラウザには、以下のメソッドがあります: 例: @import、アノテーション、属性セレクター、サブオブジェクト セレクター、音声ファミリーなどのメソッド。これらのメソッドは、「CSS Web サイトのレイアウト レコード」で説明されています。
以下は CSS です。 IE と Firefox の間の互換性の問題
1 .DOCTYPE は CSS 処理に影響します
2.FF: margin-left と margin-right を auto に設定すると div はすでに中央に配置されますが、IE は機能しません
3.FF: body を設定するときtext-align、divはマージンを設定する必要があります: auto (主にmargin-left、margin-right)を中央に配置できます
4.FF: パディングを設定した後、divは高さと幅を増加させますが、IEでは増加しないため、必要があります! important を使用して追加の高さと幅を設定します
5.FF: ! important はサポートされていますが、IE では無視されます。 ! important を使用して FF 専用のスタイルを設定できます
PS: 元のテキストは、ウェブサイトに原文の出典が記載されていないため、出典は不明です。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
