ホームページ > 記事 > ウェブフロントエンド > DIV CSS デザイン IE6/IE7/FF 互換性の問題解決_html/css_WEB-ITnose
DIV CSS デザイン IE6/IE7/FF 互換性の問題解決_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:30:02840ブラウズ
Web サイトをデザインするときは、さまざまなブラウザーとの CSS スタイルの互換性に注意を払う必要があります。特に、完全に DIV CSS を使用してデザインされた Web サイトの場合は、IE6 IE7 FF と CSS スタイルの互換性にさらに注意を払う必要があります。ネットワークが混乱している可能性があるので、外出時に影響を及ぼしたくない場合があります。 p对象中的内容
全ブラウザ共通
height: 100px;
IE6 専用
_height: 100px;
IE7 専用
*+height: 100px; 1. CSS の互換性
現在、ほとんどすべての互換性の問題を解決できるメソッドです。
1, ! important (あまりお勧めできません。次のメソッドを使用するのが最も安全です)
IE7 の ! important サポートにより、! important メソッドは現在、IE6 とのみ互換性があります。宣言位置は事前に指定する必要があることに注意してください。)
コード:
2 . FireFox 用 IE6/IE77
注:
*+html IE7 との互換性を実現するには、HTML の先頭に次のステートメントを必ず含める必要があります:
コード:
2. ユニバーサル float クロージャー (非常に重要!) これを使用すると、複数の div が整列したときに不正確な間隔が発生する問題を解決できます。
クリアフロートの原理については、を参照してください。 [構造マークアップを使用せずにフロートをクリアする方法]
次のコードをグローバル CSS に追加し、閉じる必要がある div に class="clearfix" を追加します。
コード:
3. その他の互換性に関するヒント (非常に便利)
1. FF の下の div にパディングを設定すると幅と高さが増加しますが、IE では増加しません (!重要なコマンドで解決できます。 )
2. センタリングの問題
1) 行を垂直方向に中央揃えします - 高さを現在の div と同じ高さに設定し、vetical-align: middle を渡します (コンテンツを折り返さないように注意してください)。 . 水平方向に中央揃え。 margin: 0 auto; (もちろん万能ではありません)
3. コンテンツにスタイルを追加するには、display: block を設定する必要があります。 )
4. FFとIEのBOXの理解の違いにより、2pxの差が生じ、IEではfloatに設定されたdivのマージンが2倍になるなどの問題が発生します。
5, ulタグにはデフォルトでlist-styleとpaddingがあります。 FF. 不要なトラブルを避けるために、事前に宣言するのが最善です (ナビゲーションタグとコンテンツリストに共通) 6. 外部ラッパーとしての div に固定の高さを設定しないことも最適です。
7、ハンドカーソルについて: ポインタは IE にのみ適用されます。
互換性のあるコード: 最も推奨されるモードと互換性があります。
.submitbutton {
float:left;
width: 40px;
height: 57px;
margin-top: 24px;
margin-right: 12px;
}
*html .submitbutton {
margin-top: 21px;
}
*+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;
これで、これら 3 つの紹介は終わりました。これで互換性が得られました。スタイル内の属性に対して IE6 IE7 FF 固有の互換性を定義する方法を見てみましょう。以下のコードを見てください。順序は間違ってはいけません:
プログラムコード
高さ: 100px;*height:120px;
_height:150px;
各ブラウザがこれら 3 つの属性をどのように理解するかを簡単に説明します。
FF では、FF は 2 番目と 3 番目の属性を認識しないため、height:100px と読み取られます。
IE7 では、IE7 は認識します。 3 番目の属性は認識されないため、1 番目と 2 番目の属性が読み取られ、2 番目の属性が最初の属性をカバーするため、IE7 は最終的に 2 番目の属性を読み取ります *height: 120px;
IE6 では、3 つの属性すべてが認識されるため、3 つの属性すべてが認識されます。 3 番目の属性は最初の 2 つの属性を上書きするため、IE6 は最終的に 3 番目の属性を読み取ります。
1 Firefox ie6 および ie7 用の CSS スタイル
現在、ほとんどの CSS スタイルは ! important と互換性があります。ie6 および Firefox のテストでは正常に表示できますが、ie7 は ! important を正しく解釈できるため、ページが次のように表示されません。必須！ 「*+html」を使用すると、IE7 と互換性のある方法が見つかりました。次のように CSS を記述します。
#1 { color: #333; 1 { color : #666; }
*+html #1 { color: #999; }
すると、フォントの色は、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 で MARGIN-RIGHT: auto;MARGIN-LEFT: auto; を定義するだけで、複数の div を順番に分割できます。
ボックス モデルの 3 つの異なる解釈。
#box{
width:600px;
//ie6.0 の場合 - width:500px;
//ff+ie6.0 の場合
}
#box{
width:600px! important
//ff
の場合 width:600px;
//ff+ie6.0の場合
width:500px;
//ie6.0-
の場合 }
4 浮動小数点ie
によって生成される2倍の距離 #box{ float:left ; width:100px; margin:0 0 0 100px; //この場合、IE は 200px の距離を生成します。 //float を無視します}
2 つの要素とその特徴について説明します。 Block 要素の はい: 常に新しい行で始まり、高さ、幅、行の高さ、および余白はすべて制御できます (ブロック要素)。Inline 要素の特徴は次のとおりです。他の要素と同じ行に... はできません。 be control (inline elements);
#box{ display:block; //インライン要素をブロック要素としてシミュレートできます。 display:inline; //同じ行に配置する効果を実現します。
IE と幅と高さ
IEは最小値を認識しません - この定義ですが、実際には通常の幅と高さを最小値があるかのように扱います。これは大きな問題です。通常のブラウザでは幅と高さだけを使用すると、幅と高さはまったく設定されません。 IEの下で。たとえば、背景画像を設定する場合は、この幅がより重要になります。この問題を解決するには、次のようにします。
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; min-height: 35px;}
6 ページの最小幅
min-width は、レイアウトが常に正しいことを保証するために、要素の最小幅が特定の幅未満にならないように指定できる非常に便利な CSS コマンドです。しかし、IE はこれを認識せず、実際には幅を最小幅として扱います。このコマンドを IE で機能させるには、 タグの下に
その場合、CSS は次のように設計されます:
#container{
min -width: 600px;
width:e-xpression(document.body.clientWidth < 600? “600px”: “auto” );
}
最初の min-width は通常ですが、2 行目の幅は Javascript を使用しています。これを認識できるのは IE のみであるため、HTML ドキュメントの形式も低くなります。実際にはJavaScriptの判断により最小幅を実装しています。
7 float をクリアします
. box {
display: table;
// オブジェクトをブロック要素レベルでテーブルとして表示します
}
または
と互換性があります。 after (擬似オブジェクト) は、オブジェクトの後に発生するコンテンツを設定します。通常、IE はこの擬似オブジェクトをサポートしておらず、Ie ブラウザーでもサポートされていないため、IE/WIN ブラウザーには影響しません。これの一番面倒な事
…#box:after{
content: “.”;
display: block;
height: 0;
Clear: Both;
Visibility: hidden;
}
8 DIV フローティング IE テキスト生成 3ピクセルのバグ
左のオブジェクトはフロートし、右端は外側のパッチの左マージンを使用して配置され、右のオブジェクトのテキストは左から 3 ピクセル離れた位置になります
#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 时。例：
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;}
select:empty {font:12px ! important;}
ここで select はセレクターです、状況に応じて交換します。 2 番目の文は、MAC 上の Safari ブラウザに固有のものです。
IE7 のみ認識
*+html {…}
この互換性は、IE7 専用のスタイルを作成する必要がある場合に使用できます。
IE6 以下の認識
* html {…}
ここに特に注意してください。実際、IE5.x もこの互換性を認識できます。他のブラウザでは認識されません。
html >body select {……}
この文は前の文と同じ効果があります。
IE6 のみが認識しません
select { display :none;}
これは主に、コロンの前に解放される CSS コメントを通じて属性と値を分離するためのものです。
認識しないのはIE6とIE5のみ
select { display :none;}
上記の文との違いは、セレクターと中かっこの間に追加の CSS コメントがあることです。
IE5のみ認識しません
select { display:none;}
この文は、前の文から属性領域のコメントを削除したものです。 IE5 のみが認識しません
ボックス モデル ソリューション
select {width: IE5 を処理することが重要です。これは明確にする必要があります。
フロートをクリアする
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 を記述する際の互換性の一部です。これにより、互換性を使用する頻度が減り、誤解が生じないようにすることができます。多くのタグは、複数のブラウザーとの互換性を維持するために使用されます。多くの場合、互換性がなくてもブラウザーは非常にうまく動作する可能性があります。これらは、ローカルの互換性の問題を解決するために使用されます。以下のフィルター。これらのフィルターの一部は CSS で作成され、フィルターを通じて特別なスタイルをインポートします。また、一部は HTML で作成され、条件を通じて必要なパッチ スタイルをリンクまたはインポートします。
IE5.x フィルターは IE5.x にのみ表示されます
@media tty {
i{content:"";}} @import 'ie5win.css';
IE5/MAC フィルターは通常必要ありません
以下はIE の条件付きコメントに関しては、条件付きコメントを使用して対応する互換性を呼び出すことが、マルチブラウザー互換性を実現するための完璧な解決策であると個人的に考えています。互換性が必要な部分を別のファイルに置くと、ブラウザのバージョンが一致すると、互換性のあるスタイルを呼び出すことができ、非常に便利になるだけでなく、CSS 自体をより厳密に観察できるようになります。 CSSを書く場合、互換性も含めてすべてのコードをCSSファイルに書けば、かなりカジュアルに互換性を持たせることができますが、単独で書く場合は、まずCSSに対応させる必要があるかどうかを無意識に考えてしまいます。それとも、最初にメイン CSS 内の要素を調整して、可能な限り互換性がなくなるようにする必要がありますか?ほんのわずかな互換性を備えた多くのブラウザを非常に従順に作成したとき、達成感を感じますか?選び方はわかりますね~~笑
IEのif条件は互換性があるので柔軟に使えます
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つだけお話します。
が内側にあり、
の代わりに
具体的なネスト方法
上記のネスト方法に従って、