div+cssレイアウトでIE6 IE7 FFに対応したFAQ（再掲）_html/css_WEB-ITnose

IE6 IE7 FF FAQコレクションと互換性のあるすべてのブラウザに互換性があります（主にIE6 IE7 FF） height: 100px;

IE7 のみ

*+height: 100px;
IE7 と FF に共通 !重要
1. CSS の互換性

1. , ! important (あまりお勧めできません。次のいずれかを使用するのが最も安全です)

IE7 で ! important がサポートされたため、 ! important メソッドは IE6 とのみ互換性があります (記述に注意してください。宣言位置に注意してください)。事前に指定する必要があります。)

コード:

#wrapper {

width: 100px! important; /* IE7+FF */
width: 80px; style>

2、FireFox 用 IE6/IE77 *+html と *html は IE 固有のタグであり、Firefox はまだサポートしていません。

コード:
< ;style>

#wrapper { width: 120px; } /* FireFox */

*html #wrapper { width: 80px;} /* ie6 固定 */

*+html #wrapper { width: 60px;} /* ie7 は修正されました。順序に注意してください*/

注:
*+html IE7 との互換性を確保するには、HTML の先頭に次のステートメントが必要です:

コード:


2. ユニバーサルフロートクロージャ(非常に重要です!) これを使用すると、複数の div を整列させる問題を解決できます。間隔が間違っています

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

次のコードを Global に追加しますCSS を追加し、閉じる必要がある div に class="clearfix" を追加します。

コード:

visibility:hidden;

}
.clearfix {

display:inline-block;

}
/* IE Mac から隠す */

.clearfix { display:block;}

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

/* Clearfix の終了 */

3. その他の互換性のヒント (非常に便利)

1. 以下の div にパディングを設定するFF では幅と高さが増加しますが、IE では増加しません (!重要で解決できます)
1) 行の高さを現在の div と同じ高さに設定します。次に vetical-align: middle を渡します (コンテンツを折り返さないように注意してください)。
2) 水平方向に中央揃えにします。 (もちろん、これは万能ではありません)
3. a タグ内で、display: block; を設定する必要があります (ナビゲーション タグで一般的)
4. FF と IE の間の BOX の理解の違いにより、IE でフロートに設定される div に 2px の違いが生じます (マージンが 2 倍になるなど)。
5, ul タグはデフォルトでリストスタイルとパディングを持っています。不要なトラブルを避けるために、事前に宣言することをお勧めします (ナビゲーションタグとコンテンツリストでよくあることです)
6, 外部ラッパーとしては使用しないでください。 div の高さを修正するには、高さを調整するために overflow: hidden を追加することをお勧めします。
7、ハンド カーソル: ポインタについては、コードを貼り付けます:
8、IE6 のマージンを 2 倍にします。バグ
/style> フローティング後のマージンは 10 ピクセルですが、IE はそれを 20 ピクセルとして解釈します。 解決策は、display:inline を追加することです。
9. FF の下のテキストはコンテナの高さを拡張できないのはなぜですか?
標準ブラウザで高さの値が固定されたコンテナは、IE6 のように引き伸ばされません。では、高さを固定して引き伸ばしたい場合は、どのような設定をすればよいでしょうか。解決策は、高さの設定を削除し、min-height:200px; を設定することです。min-height を認識しない IE6 を処理するには、次のように定義します。 :200px; 最小高さ:200px;

互換性のあるコード: 最も推奨されるモードと互換性があります。
/* FF */
.submitbutton {
幅: 40px;
高さ: 24px;
/* IE6 */
*html .submitbutton {
margin-top: 21px;
}
/* IE7 */
*+html .submitbutton {
margin-top: 21px;
}
異なるブラウザを使用する場合 (Firefox IE7 IE6)同じ Web サイトやページにアクセスすると、正常に表示されるものもあれば、異常に表示されるものもあるため、この問題は解決しましたが、別のブラウザーで新たな問題が発生しました。ブラウザ。互換性は、CSS 内でさまざまなブラウザをサポートするスタイルを個別に作成できるようにする方法です。今では調和が生まれています。ふふ！


プログラムコード

最初のものは互換性があり、すべての IE FF ブラウザーに共通です (実際には互換性があるとはみなされません)

height:100px;
2 つ目は IE6 のみと互換性があります

_height:100px;

3 つ目は互換性がありますIE6 と IE7 共通
*height:100px;
_height:150px; FF では 2 番目と 3 番目の属性は height:100px となります。 ;

in IE7 では、IE7 は 3 番目の属性を認識しないため、2 番目の属性が最初の属性をカバーするため、IE6 では最終的に 2 番目の属性 *height:120px を読み取ります。 IE6 は 3 つの属性をすべて認識するため、3 つの属性すべてを読み取ることができます。また、3 番目の属性は最初の 2 つの属性を上書きするため、IE6 は最終的に 3 番目の属性を読み取ります。

Firefox ie6 ie7 用の 1 つの CSS スタイル

ほとんどの CSS スタイルは ! important と互換性があります。ie6 と Firefox のテストでは正常に表示できますが、ie7 は ! important を正しく解釈できるため、ページが表示されなくなります。要求に応じ！ 「*+html」を使用して IE7 と互換性のある方法を見つけました。次のように CSS を記述します。 /

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

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

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

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

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

body {TEXT-ALIGN: center;}

#center { MARGIN-RIGHT: auto; }

説明:

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

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

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

ボックス モデルの 3 つの異なる解釈

#box{
width:600px;

//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 は float を無視します。詳細、Block要素の特徴は、常に改行で始まり、高さ、幅、行の高さ、余白をすべて制御できることです（Inline要素）。それは他の要素と同じ行にあるということです ...制御不能 (埋め込み要素);

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

5 IE 幅と高さに関する問題

IE は min- の定義を認識しませんが、実際には通常の幅と高さを min があるかのように扱います。これは大きな問題です。通常のブラウザでは幅と高さだけを使用すると、幅と高さはまったく設定されません。 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 }

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

7 清除浮动

.兼容box{
display:table;
//将对象作为块元素级的表格显示
}

.兼容box{
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;margin-bottom: 20px; text-align:center; }

解决方法：在P对象上下各加2个空的div对象CSS代码：.1{height:0px;overflow:hidden;}或者为DIV加上border属性。

屏蔽IE浏览器（也就是IE下不显示）
*:lang(zh) select {font:12px !important;} /*FF,OP可见*/
select:empty {font:12px !important;} /*safari可见*/
这里select是选择符，根据情况更换。第二句是MAC上safari浏览器独有的。

仅IE7识别
*+html {…}
当面临需要只针对IE7做样式的时候就可以采用这个兼容。

IE6及IE6以下识别
* html {…}
这个地方要特别注意很多地主都写了是IE6的兼容其实IE5.x同样可以识别这个兼容。其它浏览器不识别。
html/**/ >body select {……}
这句与上一句的作用相同。

仅IE6不识别
select { display /*IE6不识别*/:none;}
这里主要是通过CSS注释分开一个属性与值，流释在冒号前。

仅IE6与IE5不识别
select/**/ { display /*IE6,IE5不识别*/:none;}
这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。

仅IE5不识别
select/*IE5不识别*/ { display:none;}
这一句是在上一句中去掉了属性区的注释。只有IE5不识别

盒模型解决方法
selct {width:IE5.x宽度; voice-family :""}""; voice-family:inherit; width:正确宽度;}
盒模型的清除方法不是通过!important来处理的。这点要明确。

清除浮动
select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
在Firefox中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用这个清除浮动的兼容来对父级做一次定义，那么就可以解决这个问题 。

截字省略号
select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrapoverflow:hidden; }
这个是在越出长度后会自行的截掉多出部分的文字，并以省略号结尾，很好的一个技术。只是目前Firefox并不支持。

只有Opera识别
@media all and (min-width: 0px){ select {……} }
针对Opera浏览器做单独的设定。

以上都是写CSS中的一些兼容，建议遵循正确的标签嵌套(div ul li 嵌套结构关系)，这样可以减少你使用兼容的频率，不要进入理解误区，并不是一个页面就需要很多的兼容来保持多浏览器兼容)，很多情况下也许一个兼容都不用也可以让浏览器工作得非常好，这些都是用来解决局部的兼容性问题，如果希望把兼容性的内容也分离出来，不妨试一下下面的几种过滤器。这些过滤器有的是写在CSS中通过过滤器导入特别的样式，也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。

IE5.x的过滤器，只有IE5.x可见
@media tty {
i{content:"";/*" "*/}} @import ’ie5win.css’; /*";}
}/* */

IE5/MAC的过滤器，一般用不着
/**//*/
@import "ie5mac.css";
/**/

IE的if条件兼容 自己可以灵活使用参看这篇IE条件注释
Only IE
所有的IE可识别

只有IE5.0可以识别
Only IE 5.0+
IE5.0包换IE5.5都可以识别

仅IE6可识别
Only IE 7/-
IE6以及IE6以下的IE5.x都可识别
Only IE 7/-
仅IE7可识别

Css 当中有许多的东西不不按照某些规律来的话，会让你很心烦，虽然你可以通过很多的兼容，很多的!important 来控制它，但是你会发现长此以往你会很不甘心，看看许多优秀的网站，他们的CSS让IE6,Ie7,Firefox,甚至Safari,Opera运行起来完美无缺是不是很羡慕？而他们看似复杂的模版下面使用的兼容 少得可怜。其实你要知道IE 和 Firefox 并不不是那么的不和谐，我们找到一定的方法，是完全可以让他们和谐共处的。不要你认为发现了兼容的办法，你就掌握了一切，我们并不是兼容的奴隶。

div ul li 的嵌套顺序

具体的なネストの書き方

上記のネスト方法に従い、

と伝えます。 :0px;list-style:none;}、ここで list-style:none は、ドットや数字などのディレクトリ タイプのタグが

タグの先頭に表示されないようにします。これは、IE と Firefox がデフォルトの効果を表示するためです。違う。したがって、IE6、IE7、Firefox で表示される内容 (外側の余白、間隔、高さ、幅) にはほとんど違いはありません。ある時点では 2 つありますが、これはすでに完璧です。表示を制御するために大きな CSS を調整する必要はありません。通常、この互換性は 1 つまたは 2 つだけです。これにより、さまざまな場所でさまざまな互換性メソッドを繰り返しデバッグする必要がなくなります。 ul.class1、ul.class2、ul.class3 {xxx:xxxx} を使うと互換させたい箇所を簡単に振り分けて互換させることができます。 Div+CSS メソッドではほぼ無制限にネストすることができますが、上記のルールに従えば、よりリラックスして、半分の労力で 2 倍の結果が得られます。

転載元: http://blog.csdn.net