ホームページ > 記事 > ウェブフロントエンド > IE6、IE7、FFの互換性に関するDIV CSSデザイン機能（再掲）_html/css_WEB-ITnose

IE6、IE7、FFの互換性に関するDIV CSSデザイン機能（再掲）_html/css_WEB-ITnose

WBOYオリジナル: 2016-06-24 11:57:13835ブラウズ

Web サイトをデザインするときは、さまざまなブラウザーとの CSS スタイルの互換性の問題に注意を払う必要があります。特に、完全に DIV CSS を使用して設計された Web サイトの場合は、IE6 IE7 FF と CSS スタイルの互換性により注意を払う必要があります。ウェブサイトの混乱により、望ましくない影響が生じる可能性があります。

全ブラウザ共通
height: 100px;
IE6 のみ
_height: 100px;
IE7 のみ
*+height: 100px; ：10 0px ! important;
1. CSS の互換性
現在、次の 2 つの方法でほぼすべての互換性の問題を解決できます
1、! important (あまりお勧めできません。次の方法を使用するのが最も安全です)
IE7 の ! important のサポートにより、! important メソッドは現在 IE6 のみと互換性があります (記述に注意してください。宣言位置は事前に指定する必要があることに注意してください)。
コード:

2、Firefox ie6 ie7 の CSS スタイルから
*+html および *html は IE- *+html は IE7 固有のタグです。
#wrapper { width: 120px; } /* FireFox */
*html #wrapper { width : 80px;} /* ie6 修正 */
* +html #wrapper { width: 60px;} /* ie7 修正、順序に注意してください*/

注:
*+html IE7 との互換性HTML の先頭に次のステートメントを必ず含める必要があります:
コード: !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/ html4/loose.dtd">
2. ユニバーサル float クロージャー (非常に重要!) これを使用すると、複数の div が整列したときに間隔が正しくなくなる問題を解決できます。
クリアフロートの原理については、[ハウツー] を参照してください。構造マークアップなしでフロートをクリアする]
次のコードをグローバル CSS に追加し、class="clearfix" を追加すると、繰り返し動作します。
/* Clear Fix */
.clearfix:after {
content: ".";
display:block;
height:0;
visibility:hidden;
.clearfix {
display:inline-block;
/* IE Mac から非表示にするclearfix {display:block;}
/* IE Mac からの非表示の終了 */
/ * clearfix の終了 */

3. その他の互換性のヒント (非常に便利)
1. FF では幅と高さが増加しますが、IE では増加しません (!重要)
2、中央揃えの問題
1)。次に vetical-align: middle を渡します (コンテンツを折り返さないように注意してください。)
2) 水平方向に中央揃えにします (もちろん万能ではありません)
3. a タグでは、display: block; を設定する必要があります (ナビゲーションタグで一般的)
4. FF と IE の間での BOX の理解の違いにより、float に設定された div は、IE では二重マージンなどの問題を引き起こします。
5. ul タグにはデフォルトでリストスタイルとパディングが含まれており、不要なトラブルを避けるために事前に宣言することをお勧めします。 div を外部ラッパーとして追加します。
ハンドカーソル: ポインターについては、コードを貼り付けます。最も推奨されるモード。
/* FF */
.submitbutton {
幅: 40px;
高さ: 24px;
/* IE6 */
*html .submitbutton {
margin-top: 21px;
}
/* IE7 */
*+html .submitbutton {
margin-top: 21px;
}
異なるブラウザを使用する場合 (Firefox IE7 IE6)同じ Web サイトやページにアクセスすると、正常に表示されるものもあれば、異常に表示されるものもあるため、この問題は解決しましたが、別のブラウザーで新たな問題が発生しました。ブラウザ。互換性は、CSS 内でさまざまなブラウザをサポートするスタイルを個別に作成できるようにする方法です。今では調和が生まれています。ふふ！
Microsoft が最近リリースした IE7 ブラウザの互換性は、確かに一部の Web ページ開発者にとって大きな負担となっています。IE7 は標準化されましたが、FF とはまだ多くの違いがあるため、IE7 の互換性を使用する必要があります。友人にIE7の互換性はどうなっているのかと聞かれましたが、実は分かりません。 IE7 に特化した互換性はまだ見つかりません。前回の記事に加えて、「CSS Style for Firefox IE6 IE7」の互換性方法も非常に便利です。
少し論理的思考ができる人なら、IE と FF の互換性を一緒に使用できることを知っているでしょう。たとえば、次の 3 つの互換性オプションがあります: (初心者に適しています。笑、専門家はここを通り過ぎます。)
プログラムコード
1 つ目は IE FF と互換性があり、すべてのブラウザに共通です (実際には互換性があるとはみなされません)
height:100px; 2 つ目は IE6 のみと互換性があります
_height:100px; 3 つ目は IE6 と互換性がありますは IE7 と共通です
*height:100px;
これら 3 つの互換性を紹介した後、スタイル内の属性に対して IE6 IE7 FF 固有の互換性を定義する方法を見てみましょう。順序が間違っているはずがありません。
プログラムコード
height:100px;
* height:120px;
_height:150px;
各ブラウザがこれら 3 つの属性をどのように理解するかを簡単に説明します。
FF では 2 番目と 3 番目の属性が認識されないため、高さを読み取ります:100px;
IE7 では、IE7 は 3 番目の属性を認識しないため、最初と 2 番目の属性を読み取り、2 番目の属性が最初の属性を上書きするため、IE7 は最終的に 2 番目の属性 *height:120px を読み取ります。は 3 つの属性をすべて認識するため、3 つの属性すべてを読み取ることができます。また、3 番目の属性は最初の 2 つの属性を上書きするため、IE6 は最終的に 3 番目の属性を読み取ります。
Firefox ie6 ie7 用の 1 CSS スタイル
現在、ほとんどの CSS スタイルは ! important と互換性があります。ie6 および Firefox のテストでは正常に表示できますが、ie7 は ! important を正しく解釈できるため、ページが必要に応じて表示されません。！「*+html」を使用することで IE7 と互換性のある方法を見つけました。次のように CSS を記述します。
#1 { color: #333; /
* 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; 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;
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:expression(document.body.clientWidth < 600? “600px”: “auto” );
}
第一个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 { }
#box p {margin-top: 20px; margin-bottom: 20px; text-align:center; }
解決策: P オブジェクトの上下に 2 つの空の div オブジェクトを追加します。 .1{height:0px;overflow:hidden;} または DIV に border 属性を追加します。
IE ブラウザをブロックします (つまり、IE では表示されません)
*:lang(zh) select {font:12px ! important;} /*FF, OP Visible*/
select:empty {font:12px ! important; ;} / *safari で表示*/
ここで選択するのがセレクターですので、状況に応じて変更してください。 2 番目の文は、MAC 上の Safari ブラウザーに固有のものです。
IE7 でのみ認識されます
*+html {…}
IE7 専用のスタイルを作成する必要がある場合、この互換性を使用できます。
IE6 以下の識別
* html {…}
多くの地主は、IE6 と互換性があると書いています。実際、IE5.x もこの互換性を識別できます。他のブラウザでは認識されません。
html/**/ >body select {……}
この文は前の文と同じ効果があります。
IE6のみ認識しない
select { display /*IE6は認識しない*/:none;}
ここでの主な目的は、コロンの前に解放される CSS コメントを通じて属性と値を分離することです。
IE6 と IE5 のみが
select/**/ { 表示 /*IE6、IE5は認識しません*/:none;} を認識しません
上記の文との違いは、セレクターと中括弧の間に追加の CSS コメントがあることです。
IE5のみ認識しません
select/*IE5は認識しません*/ { display:none;}
この文は、前の文から属性領域のコメントを削除したものです。 IE5 のみが認識しません
ボックスモデルソリューション
selct {width:IE5.x width; voice-family:inherit; width:correct width;}
ボックスモデルのクリアメソッドが渡されません! 取り扱いが重要です。これは明確にする必要があります。
フロートをクリアする
select:after {content:"."; clear:both; Visibility:hidden;}
子がすべてフローティングになっている場合、親の高さは次のようになります。子全体を完全にラップすることはできないため、この明確な浮動互換性を使用して親を一度定義すると、この問題を解決できます。
切り捨て省略記号
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 のネストされた構造関係) に従うことをお勧めします。これにより、互換性を使用する頻度が減り、1 つのページに多くの情報が必要になることはありません。複数のブラウザとの互換性を維持するための互換性) 多くの場合、互換性がなくてもブラウザは正常に動作する可能性があります。これらは、互換性のあるコンテンツを分離したい場合に使用されます。これらのフィルターの一部は CSS で作成され、フィルターを通じて特別なスタイルをインポートします。また、一部は HTML で作成され、条件を通じて必要なパッチスタイルをリンクまたはインポートします。
IE5.x フィルター、IE5.x のみが表示されます
@media tty {
i{content:"";/*" "*/}} @import 'ie5win.css';}
}/ * ** 対応する互換性を呼び出すことは、互換性が必要な部分を別のファイルに置くことにより、使用が非常に便利になるだけではありません。 , しかしまた、CSS 自体を作成する場合、互換性を使用する必要があるかどうかをより厳密に観察できます。多くの場合、CSS を記述するときに、互換性を含むすべてのコードを .html に記述すると、非常にカジュアルになります。 CSS ファイルを自由に互換性を持たせて、独自に書くときに、まず CSS と互換性を持たせる必要があるのか、それともメインの CSS の内容を互換性があるように調整する必要があるのかを無意識に検討します。少ない互換性で多くのブラウザをうまく動作させると達成感を感じませんか?~~ (笑) IE の if 条件互換性は柔軟に使用できます。条件メモ
IEのみ
すべてのIEが認識可能
IE5.0のみが認識可能
IE 5.0+のみが認識可能
IE5.0はIE5.5を置き換え可能
IE6のみが認識可能
IE 7/-のみ
IE6およびIE5で認識可能.x 以下 IE6
IE 7/- のみ
IE7 のみで認識可能
CSS には、特定のルールに従わない場合に非常に腹立たしいものがたくさんありますが、多くの互換性や ! important を使用して制御することはできますが、実際にはそうすることを望まないことがわかります。 CSS によって IE6、Ie7、Firefox、さらには Safari や Opera さえも完璧に動作する多くの優れた Web サイトを羨ましく思いませんか?そして、一見複雑なテンプレートは互換性をほとんど使用していません。実際、IE と Firefox はそれほど不調和なものではなく、これらを調和して共存させる特定の方法を見つけることができることを知っておく必要があります。互換性のある方法を見つけたら、すべてをマスターしたことになるとは考えないでください。私たちは互換性の奴隷ではありません。
div ul li のネスト順序
今日は 1 つのルールのみを説明します。

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

前の記事：CSS は下部固定を実装します_html/css_WEB-ITnose次の記事：CSS は下部固定を実装します_html/css_WEB-ITnose

続きを見る

IE6、IE7、FFの互換性に関するDIV CSSデザイン機能（再掲）_html/css_WEB-ITnose

関連記事