ホームページ > 記事 > ウェブフロントエンド > 【再掲】DIV設計時のIE6、IE7、FFの互換性関連機能 CSS_html/css_WEB-ITnose

【再掲】DIV設計時のIE6、IE7、FFの互換性関連機能 CSS_html/css_WEB-ITnose

WBOYオリジナル: 2016-06-24 12:29:501160ブラウズ

転載元: http://hi.baidu.com/zhenghanzheng/blog/item/840e5501d2c71b0a7aec2c81.html

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

全ブラウザ共通
高さ: 100px;
IE6 のみ
*高さ: 100px;
IE7 のみ
*+高さ: 100px;ピクセル! important;
1. CSS の互換性
現在、次の 2 つの方法でほとんどすべての互換性の問題を解決できます
1、! important (あまりお勧めできません。次の方法を使用するのが最も安全です)
IE7 の ! important のサポートにより、 ! importantメソッドは IE6 のみに対応しました (書き方に注意してください。事前に位置を宣言することを忘れないでください。)
コード:

2、IE6/IE77 for Firefox ie6 ie7<
*+html および *html は IE 固有のタグです。 *+html も IE7 固有のタグです。
コード:

注:
*+html IE7 との互換性により、 HTML の先頭に次のステートメント:
コード:
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose .dtd">
2. ユニバーサルフロートクロージャー (非常に重要!) これを使用すると、複数の div を整列させるときに不正確な間隔が発生する問題を解決できます。
フロートをクリアする原理については、[構造を使用せずにフロートをクリアする方法] を参照してください。マークアップ]
次のコードをグローバル CSS に追加し、class="clearfix" を追加します。
コード:

3. FF の下の div にパディングを設定すると、 width と height は増加しますが、IE では増加しません (!重要な問題は
2 で解決できます)。 line-height を現在の div と同じ高さに設定し、vetical- を渡します。 align: middle (コンテンツを折り返さないように注意してください。)
2) 水平方向に中央揃えにします (もちろん万能ではありません)
3. a タグのコンテンツにスタイルを追加する必要がある場合。 display: block; を設定する必要があります (ナビゲーションタグで共通)
4. FF と IE の間での BOX の理解の違いにより、float に設定された div は、IE で二重マージンなどの問題を引き起こします。 . ul タグにはデフォルトでリストスタイルとパディングがあり、不要なトラブルを避けるために事前に宣言することをお勧めします (ナビゲーションタグとコンテンツリストでよくあることです)
6. 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 と互換性があり、共通ですto IE7
*height:100px; これで互換性が得られました。次は、スタイル内の各属性の互換性を定義する方法を見てみましょう。
プログラムコード
高さ:100ピクセル;
_高さ:150ピクセル;各ブラウザがこれら 3 つの属性をどのように理解するかを簡単に説明します。
FF では、2 番目と 3 番目の属性は FF によって認識されないため、height:100px と読み取られます。
IE7 では、3 番目の属性は IE7 によって認識されません。最初と 2 番目の属性を読み取り、2 番目の属性が最初の属性をカバーするため、IE7 は最終的に 2 番目の属性 *height:120px を読み取ります。
IE6 では、3 つの属性 IE6 はすべて相互に認識しているため、3 つの属性すべてを読み取ることができます。 3 番目の属性は最初の 2 つの属性を上書きするため、IE6 は最終的に 3 番目の属性を読み取ります。
Firefox ie6 ie7 用の 1 CSS スタイル
現在、ほとんどの CSS スタイルは ! important と互換性があります。ie6 および Firefox のテストでは正常に表示できますが、ie7 は ! important を正しく解釈できるため、ページが必要に応じて表示されません。！「*+html」を使用することで IE7 と互換性のある方法を見つけました。次のように CSS を記述します。
#1 { color: #333; /
* html #1 { カラー: #666; } /* IE6 */
*+html #1 { カラー: #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 {background-color:#eee; }
#box p {margin-top: 20px; margin-bottom: 20px;
解決策: P オブジェクトの上と下に追加します。 2 空の div オブジェクト CSS コード: .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 のみが
Box モデルソリューション
selct {width:IE5 を認識しません。これは明確にする必要があります。
フロートをクリアする
select:after {content:"."; clear:both; Visibility:hidden;}
子がすべてフローティングになっている場合、親の高さは次のようになります。子全体を完全にラップすることはできないため、この明確な浮動互換性を使用して親を一度定義すると、この問題を解決できます。
省略記号の切り捨て
select { -o-text-overflow:ellipsis; red-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' /*";}
}/ * */
IE5/MAC フィルターは通常必要ありません
/**//*/
@import "ie5mac.css";
/**/
以下は IE の条件付きコメントです。対応する互換性を呼び出すことは、互換性が必要な部分を別のファイルに置くことで、ブラウザのバージョンが一致している場合に、互換性のあるスタイルを呼び出すことができるため、非常に便利です。また、CSS 自体を作成する場合、互換性を使用する必要があるかどうかをより厳密に観察できます。多くの場合、CSS を記述するときに、互換性を含むすべてのコードを記述すると、非常にカジュアルになります。 CSS ファイルを自由に互換性を持たせて、独自に記述する場合は、CSS と互換性を持たせる必要があるか、それともメインの CSS の内容を調整する必要があるかを無意識に検討します。ほんの少しの互換性で多くのブラウザをうまく動作させると達成感を感じませんか?〜笑 IE の if 条件の互換性はこの記事を参照してください。 IE条件メモ
IEのみ
すべてのIEで認識可能
IE5.0のみで認識可能
IE5.0以上のみで認識可能
IE5.5を含むIE5.0で認識可能
IE6のみで認識可能
IE7/-のみで認識可能
IE6と認識可能IE6以下のIE5.x
IE 7/-のみ
IE7のみ認識可能
CSS には、特定のルールに従わない場合に非常に腹立たしいものがたくさんありますが、多くの互換性や ! important を使用して制御することはできますが、実際にはそうすることを望まないことがわかります。 CSS によって IE6、Ie7、Firefox、さらには Safari や Opera さえも完璧に動作する多くの優れた Web サイトを羨ましく思いませんか?そして、一見複雑なテンプレートは互換性をほとんど使用していません。実際、IE と Firefox はそれほど不調和なものではなく、それらを調和して共存させる特定の方法を見つけることができることを知っておく必要があります。互換性のある方法を見つけたら、すべてをマスターしたことになるとは考えないでください。私たちは互換性の奴隷ではありません。
div ul li のネスト順序
今日は 1 つのルールのみを説明します。

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

前の記事：Div + CSS でアダプティブ幅レイアウト (リキッドレイアウト) を作成 (転送)_html/css_WEB-ITnose次の記事：Div + CSS でアダプティブ幅レイアウト (リキッドレイアウト) を作成 (転送)_html/css_WEB-ITnose

続きを見る

【再掲】DIV設計時のIE6、IE7、FFの互換性関連機能 CSS_html/css_WEB-ITnose

関連記事