DIV+CSS_html/css_WEB-ITnose を設計する場合の IE6、IE7、および FF の互換性関連の機能-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

DIV+CSS_html/css_WEB-ITnose を設計する場合の IE6、IE7、および FF の互換性関連の機能

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:29 PM

Web サイトをデザインするときは、さまざまなブラウザーとの CSS スタイルの互換性に注意を払う必要があります。特に、完全に DIV CSS を使用してデザインされた Web サイトの場合は、IE6 IE7 FF と CSS スタイルの互換性にさらに注意を払う必要があります。ネットワークが混乱している可能性があるので、外出時に影響を及ぼしたくない場合があります。
すべてのブラウザに共通の高さ: 100px;
IE6 固有の高さ: 100px;
現在、次の 2 つの方法でほぼすべての互換性の問題を解決できます (あまり推奨されていません。1 つを使用してください)。
IE7 の ! important サポートにより、 ! important メソッドは IE6 とのみ互換性があります。(書き方に注意してください。宣言位置を事前に指定する必要があることに注意してください。)
コード:

< スタイル >
#wrapper {
width: 100px! important; /* IE6 */
}

2, IE6 FireFox の /IE77 *+html と *html は、Firefox ではまだサポートされていない IE 固有のタグです。

コード:

< style >
#wrapper { width : 120px } /* FireFox */
*html #wrapper { width : 80px } / * ie6 固定 */

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

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

コード:

2. Universal Float クロージャ (非常に重要!)これを使用して、複数の div を整列させるときに不正確な間隔が発生する問題を解決できます
float をクリアする原理については、[構造マークアップを使用せずに Float をクリアする方法] を参照してください
閉じる必要があるものについては、次のコードをグローバル CSS に追加します。 div に class="clearfix" を追加するだけで、毎回機能します。
コード:
< style >

.clearfix:after {

content: ".";ブロック;
高さ : 0 ;
可視性 : 非表示 ;
.clearfix {
表示 : インラインブロック ;
/* IE Mac から非表示にする */
.clearfix ;
/* IE Mac からの非表示の終了 */

/* clearfix の終了 */

3. その他の互換性のヒント (非常に便利)
1. FF の下の div にパディングを設定すると、幅と
2. 中央揃えの問題
1) line-height を現在の div と同じ高さに設定し、vetical-align を渡します。 (コンテンツを折り返さないように注意してください。)
2) 水平方向の中央揃え: 0 auto; (もちろん普遍的ではありません)
3. a タグ内のコンテンツにスタイルを追加する必要がある場合は、 set display: block; (ナビゲーションタグで共通)
4. FF と IE のペア BOX の理解の違いにより、2px の違いが発生し、IE では float に設定された div のマージンが 2 倍になるなどの問題が発生します。
5. ul。タグにはデフォルトでリストスタイルとパディングが含まれており、不必要なトラブルを避けるために事前に宣言することをお勧めします。高さの適応性を実現するには、オーバーフロー: 非表示を追加するのが最善です。
ハンドカーソル: ポインタについては、コードを貼り付けます: 最も推奨されるモードと互換性があります。

< スタイル >
/* FF */
フロート: 左;
高さ: 24 ピクセル;
/* IE6 */

*html .submitbutton {

margin-top : 21px ;
}
/* IE7 */
*+html .submitbutton {
margin-top : 21px ;
;

ブラウザの互換性とは: 異なるブラウザ (Firefox IE7 IE6) を使用して同じ Web サイトまたはページにアクセスすると、正常に表示されるものもあれば、異常に表示されるものもあり、CSS を記述するときに非常にイライラします。このブラウザの問題を修正したところですが、別のブラウザには新たな問題が発生しています。互換性は、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;
これで互換性が得られたので、スタイル内の各属性に対する IE6 IE7 FF の互換性を定義する方法を見てみましょう。間違っています:
プログラムコード
height: 100px;
*height: 120px;
_height:150px;
FF では、FF は 2 番目と 3 番目の属性を認識しません。 reads height:100px;
IE7 では 3 番目の属性が認識されないため、最初と 2 番目の属性が読み取られ、2 番目の属性が最初の属性をカバーするため、IE7 は最終的に 2 番目の属性 *height:120px; を読み取ります。 IE6 以下では、3 つの属性はすべて IE6 によって認識されるため、3 つすべての属性を読み取ることができます。また、3 番目の属性が最初の 2 つの属性を上書きするため、IE6 は最終的に 3 番目の属性を読み取ります。
1 Firefox ie6 ie7 用の CSS スタイル
現在、ほとんどの CSS スタイルは ! important と互換性があります。ie6 および Firefox のテストでは正常に表示できますが、ie7 は ! important を正しく解釈できるため、ページが必要に応じて表示されません。！「*+html」を使用して IE7 と互換性のある方法を見つけました。次のように CSS を記述します。
< style > #1 { color : #333 ; } /* モズ */
* html #1 { カラー : #666 ; } /* IE6 */
*+html #1 { カラー : #999 } /* IE */

すると、フォントの色は Firefox では #333、IE6 では #666、IE7 では #999 として表示されます。
2 CSS レイアウトの中央揃えの問題
主なスタイル定義は次のとおりです。

< style >

body { TEXT-ALIGN : center }

#center { MARGIN-RIGHT : 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!重要
// ff の場合

width:600px ;

// ff+ie6.0 の場合
width /**/ : 500px
// 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; //实现同一行排列的的效果

iplay:table;

5 IE与宽度和高度的问题
IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：

< style >
#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这样设计：

< style >
#container {
min-width : 600px ;
width : e-xpression(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的间距.

< style >
#box {
float : left ;
width : 800px ; }
#left {
float : left ;
width : 50% ; }
#right {
width : 50% ;
}
*html #left {
margin-right : -3px ;
//这句是关键
}

HTML代码
< DIV id =box >
< DIV id =left >
< DIV id =right >

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 を処理することが重要です。これは明確にする必要があります。

float をクリアします

select:after {content:"."; display:block; height:0; 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' /*";}
} /* */

IE5/MACのフィルターは基本的に必要ありません

/**//*/
@import "ie5mac.css";
/**/

以下はIEの条件付きコメントです。個人的には、条件付きコメントを使用して対応する互換性を呼び出すことが、互換性が必要な部分を別のファイルに置くことで、ブラウザのバージョンが一致している場合に、互換性のあるスタイルを呼び出すことができる完璧な解決策だと思います。使いやすいだけでなく、CSS自体を作成する際に、互換性を含めたコードをすべて記述すると、互換性を使用する必要があるかどうかをより厳密に観察できるようになります。 CSS ファイルは、非常にカジュアルに自由に互換性を持たせることができます。メインの CSS にあるものはできるだけ互換性のないものにする必要がありますか?条件が互換性があり、柔軟に対応できる場合は、この IE 条件メモを参照してください

IE のみ

すべての IE が認識できます

IE5.0 のみが認識できます
IE 5.0 以降のみ

IE5.0 は IE5.5 を置き換えることができます

IE6のみ認識可能
IE 7/-のみ

IE6およびIE6以下のIE5.xで認識

IE 7/-のみ
IE7のみ認識可能

CSS には、特定のルールに従わない場合に非常に腹を立てるものがたくさんありますが、多くの互換性と多くの ! important を使用して制御できますが、そうすることは非常に嫌になるでしょう。長期的には、多くの優れた Web サイトを見て、その CSS によって IE6、Ie7、Firefox、さらには Safari や Opera さえも完璧に動作するのを見てうらやましく思いませんか?そして、一見複雑なテンプレートは互換性をほとんど使用していません。実際、IE と Firefox はそれほど不調和なものではなく、これらを調和して共存させる特定の方法を見つけることができることを知っておく必要があります。互換性のある方法を見つけたら、すべてをマスターしたことになるとは考えないでください。私たちは互換性の奴隷ではありません。

div ul li のネスト順序

今日は 1 つのルールだけを説明します。