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

コード:


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

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

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

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

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 */

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 レイアウトの中央揃えの問題
主なスタイル定義は次のとおりです。

body { TEXT-ALIGN : center }

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

この方法を使用してページ全体を中央揃えにしたい場合は、含めないことをお勧めします。 DIV では、複数の div を順番に分割できます。分割した各 div で MARGIN-RIGHT: auto;MARGIN-LEFT: auto; を定義するだけです。
ボックス モデルの 3 つの解釈box {
width : 600px!重要
// ff の場合

// 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上也能用，可以把一个