ホームページ > 記事 > ウェブフロントエンド > div+CSS ブラウザの互換性問題の整理 (IE6.0、IE7.0、ie8、FireFox...) 4_html/css_WEB-ITnose
div+CSS ブラウザの互換性問題の整理 (IE6.0、IE7.0、ie8、FireFox...) 4_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:29:421069ブラウズ
IE6、IE7、FFの互換性に関する機能 p对象中的内容
CSS HACK
コード:
すべてのブラウザに共通
高さ: 100px; *高さ: 100px;
IE7専用
*+高さ: 100px;
と共有IE7 と FF
height: 100px ! important (priority);
1. CSS HACK
現在のほぼすべての HACK は次の 2 つの方法で解決できます
1, ! important (あまりお勧めできません。次のいずれかを使用するのが最も安全です。 )
IE7 の ! important サポートにより、 ! important メソッドは IE6 の HACK 専用になりました (書き方に注意してください。宣言位置は事前に In である必要があることに注意してください。)
コード:
2. IE6/IE77 for FireFox
*+html と *html は、Firefox ではサポートされていない IE 固有のタグです。また、*+html は IE7 固有のタグです。
コード:
注: IE7 用の
*+html HACK では、HTML の先頭に次のステートメントが必ず含まれるようにする必要があります:
コード:
2. ユニバーサル フロート クロージャ (非常に重要!) これを使用して複数の問題を解決できます 整列時の間隔divs が間違っています。
float をクリアする原理については、[構造的マークアップを使用せずに Float をクリアする方法] を参照してください。
グローバル CSS に次のコードを追加し、閉じる必要がある div に class="clearfix" を追加します。 .
コード:
3. その他の互換性に関するヒント (非常に便利)
1. FF で div にパディングを設定すると幅と高さが増加しますが、IE では増加しません。 !重要)
2、中央揃えの問題
1) で解決しました。 line-height を現在の div と同じ高さに設定し、vertical-align: middle を渡します (コンテンツを折り返さないように注意してください)。
2). margin: 0 auto;(もちろん万能ではありません)
3. a タグのコンテンツにスタイルを追加する必要がある場合は、display: block; を設定する必要があります。ナビゲーションタグ)
4. FFとIEではBOXの理解に2pxの差が生じ、一部の設定はIEではdivのマージンが2倍になっています。
5、ulタグはlist-styleとなります。 FF ではデフォルトでパディングを追加します。不要なトラブルを避けるために、事前に宣言するのが最善です (ナビゲーションタグとコンテンツリストに共通)
6, 外部ラッパーとして、div は固定の高さを持たないことが最善です。オーバーフロー: 高さの適応性を実現するために非表示にします。
7、ハンド カーソル: ポインターについて。 コードを貼り付けます。
互換性のあるコード: ハックに最も推奨されるモード。
/* FF */
.submitbutton {
float:left;
width: 40px;
height: 57px;
margin-top: 24px;
margin-right: 12px;
}
/* IE6 */
*html .submitbutton {
margin-top: 21px;
}
/* IE7 */
*+html .submitbutton {
margin-top: 21px;
}
ブラウザ HACK とは: 異なるタイミングを使用する場合ブラウザ (Firefox IE7 IE6) が同じ Web サイトまたはページにアクセスすると、正常に表示されるものもあれば、異常に表示されるものもあるため、このブラウザの問題は修正されました。しかし、別のブラウザで新たな問題が発生しました。 HACK は、CSS 内でさまざまなブラウザをサポートするスタイルを個別に記述することができる方法です。今では調和が生まれています。ふふ！
Microsoft が最近リリースした IE7 ブラウザの互換性は、確かに一部の Web ページ作成者にとって大きな負担となっています。IE7 は標準化されましたが、FF とはまだ多くの違いがあるため、IE7 HACK を使用する必要があると多くの友人が尋ねました。 IE7のHACKが何なのか、実は私も知りません。 IE7 用の特定の HACK はまだ見つかりません。前回の記事に加えて、「CSS Style for Firefox IE6 IE7」のハック方法も非常に役立ちます。
少し論理的思考ができる人なら、IE と FF の HACK を一緒に使用できることを知っているでしょう。たとえば、次の 3 つの HACK があります: (初心者に適しています。笑、専門家はここを通り過ぎます。)
プログラム コード
いいえ、1 つの HACK、IE FF はすべてのブラウザーに共通です (実際には HACK ではありません)
height:100px;
2 つ目の HACK は IE6 専用です
_height:100px;
3 つ目の HACK は IE6 と IE7 に共通です
*高さ:100px;
これら 3 つの HACK を紹介したので、スタイル内の各属性に対して IE6 IE7 FF 固有の HACK を定義する方法を見てみましょう。順序は間違っていません:
プログラム コード
高さ: 100px;
*height:120px;
_height:150px;
各ブラウザがこれら 3 つの属性をどのように理解するかを簡単に説明します。
FF では、FF は 2 番目と 3 番目の属性を認識しないため、height :100px;
と読み取られます。
IE7 では、IE7 は 3 番目の属性を認識しないため、1 番目と 2 番目の属性を読み取ります。また、2 番目の属性が最初の属性をカバーするため、IE7 は最終的に 2 番目の属性を読み取ります。は 3 つの属性をすべて認識するため、3 つの属性すべてを読み取ることができます。また、3 番目の属性は最初の 2 つの属性を上書きするため、IE6 は最終的に 3 番目の属性を読み取ります。
1 Firefox ie6 ie7 の CSS スタイルについて
現在、ほとんどの場合、ハッキングに ! important が使用されています。ie6 および Firefox のテストでは、正常に表示できますが、ie7 は ! important を正しく解釈できます。このページをクリックしないでください。 「*+html」を使用する IE7 用の良いハックを見つけました。IE7 で参照すると、次のような CSS を書くことができます。
#1 { color: #333; /* Moz */
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE7 */
すると、Firefox ではフォントの色が #333 として表示されます。 IE6 ではフォントの色は #666、IE7 では #999 になります。
2 CSS レイアウトのセンタリングの問題
主なスタイル定義は次のとおりです:
body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: 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! 重要
//for ff
width:600px;
//for ff+ie6.0
width /**/:500px;
//for ie6.0-
}
4 浮動IEによって生成される2倍の距離
#box{ float:left; width:100px; margin:0 0 0 100px; この場合、IE は 200px の距離を生成します。 // float を無視します。詳細、Block要素の特徴は、常に改行で始まり、高さ、幅、行の高さ、余白をすべて制御できることです（Inline要素）。それは他の要素と同じ行にあるということです ...Uncontrollable (embedded elements);
#box{ //インライン要素をブロック要素としてシミュレートできます。 //配置の効果を実現します。同じ行に diplay:table;
5 IE 幅と高さに関する問題
IE は min- の定義を認識しませんが、実際には通常の幅と高さを min があるかのように扱います。これは大きな問題です。通常のブラウザでは幅と高さだけを使用すると、幅と高さはまったく設定されません。 IEの下で。たとえば、背景画像を設定する場合は、この幅がより重要になります。この問題を解決するには、次のようにします:
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; min-width: 80px; }
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 Clear floats
.hackbox{
display:table;
//オブジェクトをブロック要素レベルのテーブルとして表示します
}
または
.hackbox{
clear:both;
}
または以下を追加します: after (擬似オブジェクト) は、オブジェクトの後に発生するコンテンツを設定します。通常、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 时。例：
CSS:
#box {background-color:#eee; }
#box p {margin-top: 20px; margin-bottom: 20px; }
解決策: P オブジェクト内空の div オブジェクトの CSS コードを上下に 2 つ追加します: .1{height:0px;overflow:hidden;} または、div に border 属性を追加します。
IE ブラウザをブロックします (つまり、IE では表示されません)
*:lang(zh) select {font:12px ! important;} /*FF, OP 表示*/
select:empty { font:12px ! important;} /*safari で表示*/
ここでの select はセレクターで、状況に応じて変更できます。 2 番目の文は、MAC 上の Safari ブラウザに固有のものです。
IE7 でのみ認識
*+html {…}
この HACK は、IE7 専用のスタイルを作成する必要がある場合に使用できます。
IE6 以下の識別
* html {…}
この場所には特に注意してください。実際、IE5.x もこの HACK を認識できます。他のブラウザでは認識されません。
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;}
子がすべてフローティングになっている場合、親の高さは子全体を完全にラップすることは不可能です。その後、このフローティング HACK を使用して親を 1 回定義すると、この問題は解決できます。
切り捨て省略
select { -o-text-overflow:ellipsis; text-overflow:nowrap; overflow: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の条件コメントです。個人的には、条件付きコメントを使用して対応する Hack を呼び出すのが、複数のブラウザーと互換性のある完璧なソリューションだと思います。非常に便利なだけでなく、CSS自体を作成する際に、Hackを含めたコードをすべて記述すると、より厳密にHackを使用する必要があるかどうかを確認できます。 CSS ファイルをハックするのは非常にカジュアルです。自分で書いていると、最初に CSS をハックする必要があるのか、それともメインの CSS を調整する必要があるのかを無意識に考えてしまいます。いくつかのハックを使用するだけで、多くのブラウザが正常に動作するようになると達成感を感じますか? 使用方法については、この IE 条件ノートを参照してください。すべての IE が認識できます
IE5.0 のみが認識できます
IE 5.0 以降のみが認識できます
IE5.0 は IE5.5 を置き換えることができます
IE6 のみが認識できます
IE 7/- のみ
IE6 と IE5 で認識できます。Css 当中有许多的东西不不按照某些规律来的话，会让你很心烦，虽然你可以通过很多的hack，很多的!important 来控制它，但是你会发现长此以往你会很不甘心，看看许多优秀的网站，他们的CSS让IE6,Ie7,Firefox,甚至Safari,Opera运行起来完美无缺是不是很羡慕？而他们看似复杂的模版下面使用的Hack 少得可怜。其实你要知道IE 和 Firefox 并不不是那么的不和谐，我们找到一定的方法，是完全可以让他们和谐共处的。不要你认为发现了hack的办法，你就掌握了一切，我们并不是Hack的奴隶。
div ul li 的嵌套顺序
今天只讲一个规则。就是，然后再是
的时候，你会发现你的间隙十分难控制，一般情况下，IE6和IE7会凭空多一些间距。但很多情况你来到下一行，间隙就没了，但是前面的内容又空了很大一块，出现这种情况虽然你可以改变IE的Margin，然后调整Firefox下面的Padding，以便使得两者显示起来得效果很相似，但是你得CSS将变得臭长无比，你不得不多考虑更多可能出现这种问题补救措施，虽然你知道千篇一律来Hack它们，但是你会烦得要命。
具体嵌套写法
遵循上面得嵌套方式，