DIV+CSS ブラウザの互換性の問題

Web サイトを設計するときは、さまざまなブラウザーとの CSS スタイルの互換性に注意を払う必要があります。特に、完全に p CSS を使用して設計された Web サイトの場合は、IE6 IE7 FF と CSS スタイルの互換性にさらに注意を払う必要があります。散らかる効果が現れます！ すべてのブラウザに共通

IE6 のみ
_height: 100px;

IE7 のみ
*+height: 100px; 100ピクセル！ important;
1. CSS の互換性
現在、次の 2 つの方法でほぼすべての互換性の問題を解決できます。

1、! important (あまりお勧めできません。次の方法を使用するのが最も安全です)

IE7 の ! important のサポートにより、! important メソッドは IE6 のみに対応しました (記述に注意してください。宣言位置は事前に宣言する必要があることに注意してください)。 * IE7+FF */
width: 80px; /* IE6 */
}


2、Firefox 用 IE6/IE77

*+html および * html は IE タグに固有であり、Firefox はまだサポートしていません。また、*+html は IE7 固有のタグです。


注:
*+html IE7 との互換性では HTML の先頭を確保する必要があります 次のような記述があります:

Code:
gt ;

2. Universal float クロージャー (非常に重要!) これを使用すると、複数の ps が整列しているときに不正確な間隔が発生する問題を解決できます。

の原理については、 float をクリアする場合は、[構造マークアップを使用せずにフロートをクリアする方法] を参照してください。 CSS で次のコードを Global に追加します。閉じる必要がある p に class="clearfix" を追加するだけです。これは毎回機能します。

9 属性セレクター (これは互換性があるとみなされません。CSS を隠すバグです)

p[id]{}p[id]{}
p[id]{}p[id]{}

これはIE6.0 以下のバージョンでは非表示になっていますが、FF と OPera

の属性セレクターとサブセレクターの機能には違いがあります。サブセレクターの範囲は形式上狭くなりますが、属性セレクターの範囲は比較的広くなります。たとえば、p[id] では、すべての p タグが次のようになります。 ID はすべて同じスタイルです。

10 IE かくれんぼの問題

p アプリケーションが複雑で、各列にいくつかのリンクがある場合、この時、かくれんぼ問題が発生しやすくなります。
一部のコンテンツは表示できません。マウスでこの領域を選択すると、コンテンツが実際にページ上にあることがわかります。
解決策: #layout に line-height 属性を使用するか、#layout に固定の高さと幅を使用します。ページ構造はできるだけシンプルにしてください。

11 高さ非適応

高さ非適応とは、特に内部オブジェクトが
margin または Paddign を使用している場合、内側のオブジェクトの高さが変化したときに、外側のレイヤーの高さを自動的に調整できないことを意味します。例:

p オブジェクトのコンテンツ

CSS:

#box {background-color: #eee ;
#box p {margin-top: 20px; margin-bottom: 20px; text-align:center; }

解決策: P オブジェクトの CSS コードの上下に 2 つの空の p オブジェクトを追加します: .1{height :0px;overflow :hidden;} または、p に border 属性を追加します。





IE ブラウザをブロックします (つまり、IE では表示されません)
*:lang(zh) select {font:12px ! important;} /*FF, OP 表示*/
select:empty { font:12px ! important;} /*visible in safari*/
select ここはセレクターで、状況に応じて変更できます。 2 番目の文は、MAC 上の Safari ブラウザーに固有のものです。

IE7 でのみ認識
*+html {…}
この互換性は、IE7 専用のスタイルを作成する必要がある場合に使用できます。

IE6 以下の識別
* html {…}
多くの地主が IE6 と互換性があると書いていますが、実際には IE5.x もこの互換性を認識します。他のブラウザでは認識されません。
html/**/ { 表示 /*IE6、IE5は認識しません*/:none;}
ここでの主な目的は、コロンの前に解放される CSS コメントを通じて属性と値を分離することです。

IE6 と IE5 のみ
select/**//*/: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 を記述する際の互換性の一部です。正しいタグのネスト (入れ子になった構造関係) に従うことをお勧めします。これにより、互換性を使用する頻度が減り、誤解を避けることができます。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の条件が合えば柔軟に使えます
IEのみ
すべてのIEが認識可能

IE5.0のみが認識可能
IE 5.0のみ+
IE5 .0 は IE5.5 で認識されることを保証します

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

p ul li の入れ子の順序

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

• の三角関係です。私の経験では、

  は外側にあり、

  は
  • の中に入れ子にすることもできます。たくさんのものを詰め込みます。このようなルールに従うと、
    の代わりに
    • を入れると、不運で不従順なギャップが現れなくなります。そのギャップを制御するのは非常に難しいことがわかります。通常の状況では、IE6 と IE7 には、何もないところにより多くのギャップが生じます。しかし、多くの場合、次の行に進むと隙間は消えますが、前の内容は空になっています。この場合、IE の Margin を変更し、Firefox で Padding を調整すると、両方が表示されるようになります。効果は非常に似ていますが、CSS が非常に臭くなり、この問題に対する可能な解決策をさらに考える必要があります。それらすべてと互換性があることはわかっていても、死ぬほどイライラすることになります。
      
      具体的なネストの書き方
      
      上記のネスト方法に従い、
      と伝えます。 : 0px;list-style:none;}、ここで list-style:none は、ドットや数字などのディレクトリ タイプのタグが
    • タグの先頭に表示されないようにします。これは、IE と Firefox で表示されるデフォルトの効果が次のとおりであるためです。多少同じではありません。したがって、IE6、IE7、Firefox で表示される内容 (外側の余白、間隔、高さ、幅) にはほとんど違いはありません。ある時点では 2 つありますが、これはすでに完璧です。表示を制御するために大きな CSS を調整する必要はありません。通常、この互換性は 1 つまたは 2 つだけです。さまざまな場所で異なる互換性メソッドを繰り返しデバッグする必要はありません。これにより、長さを超えた余分なテキストが自動的に切り取られ、終了します。 ellipse、これは非常に優れた A テクノロジーです。 Firefox が現在サポートしていないだけです。
      
      Operaのみで認識
      @media all and (min-width: 0px){ select {……} }
      Operaブラウザは別途設定してください。
      
      上記は、CSS を記述する際の互換性の一部です。正しいタグのネスト (入れ子になった構造関係) に従うことをお勧めします。これにより、互換性を使用する頻度が減り、誤解を避けることができます。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の条件が合えば柔軟に使えます
      IEのみ
      すべてのIEが認識可能
      
      IE5.0のみが認識可能
      IE 5.0のみ+
      IE5 .0 は IE5.5 で認識されることを保証します
      
      認識できるのは IE6 のみです
      IE 7/-
      IE6 と IE5 のみです
      Css には、認識されないと非常にイライラするものがたくさんあります。特定のルールに従うことは、多くの互換性と多くの !重要性によって制御できますが、多くの優れた Web サイトを参照すると、長期的にはそうする気にはなれません。彼らの CSS により、IE6、Ie7、Firefox、さらには Safari や Opera も完璧に動作しますか?そして、一見複雑なテンプレートは互換性をほとんど使用していません。実際、IE と Firefox はそれほど不調和なものではなく、これらを調和して共存させる特定の方法を見つけることができることを知っておく必要があります。互換性のある方法を見つけたら、すべてをマスターしたことになるとは考えないでください。私たちは互換性の奴隷ではありません。
      
      p ul li の入れ子の順序
      
      今日は 1 つのルールだけを説明します。
      • の三角関係です。私の経験では、

        は外側にあり、

        は
        • の中に入れ子にすることもできます。たくさんのものを詰め込みます。このようなルールに従うと、
          の代わりに
          • を入れると、不運で不従順なギャップが現れなくなります。そのギャップを制御するのは非常に難しいことがわかります。通常の状況では、IE6 と IE7 には、何もないところにより多くのギャップが生じます。しかし、多くの場合、次の行に進むと隙間は消えますが、前の内容は空になっています。この場合、IE の Margin を変更し、Firefox で Padding を調整すると、両方が表示されるようになります。効果は非常に似ていますが、CSS が非常に臭くなり、この問題に対する可能な解決策をさらに考える必要があります。それらすべてと互換性があることはわかっていても、死ぬほどイライラすることになります。
            
            具体的なネストの書き方
            
            上記のネスト方法に従い、
            と伝えます。 : 0px;list-style:none;}、ここで list-style:none は、ドットや数字などのディレクトリ タイプのタグが
          • タグの先頭に表示されないようにします。これは、IE と Firefox で表示されるデフォルトの効果が次のとおりであるためです。多少同じではありません。したがって、IE6、IE7、Firefox で表示される内容 (外側の余白、間隔、高さ、幅) にはほとんど違いはありません。ある時点では 2 つありますが、これはすでに完璧です。表示を制御するために大きな CSS を調整する必要はありません。通常、この互換性は 1 つまたは 2 つだけです。さまざまな場所で異なる互換性メソッドを繰り返しデバッグする必要はありません。これにより、長さを超えた余分なテキストが自動的に切り取られ、終了します。 ellipse、これは非常に優れた A テクノロジーです。 Firefox が現在サポートしていないだけです。
            
            Operaのみで認識
            @media all and (min-width: 0px){ select {……} }
            Operaブラウザは別途設定してください。
            
            上記は、CSS を記述する際の互換性の一部です。正しいタグのネスト (入れ子になった構造関係) に従うことをお勧めします。これにより、互換性を使用する頻度が減り、誤解を避けることができます。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条件注释
            Only IE
            所有的IE可识别
            
            只有IE5.0可以识别
            Only IE 5.0+
            IE5.0包换IE5.5都可以识别
            
            仅IE6可识别
            Only IE 7/-
            IE6以及IE6以下的IE5.x都可识别
            Only IE 7/-
            仅IE7可识别
            
            Css 当中有许多的东西不不按照某些规律来的话，会让你很心烦，虽然你可以通过很多的兼容，很多的!important 来控制它，但是你会发现长此以往你会很不甘心，看看许多优秀的网站，他们的CSS让IE6,Ie7,Firefox,甚至Safari,Opera运行起 来完美无缺是不是很羡慕？而他们看似复杂的模版下面使用的兼容 少得可怜。其实你要知道IE 和 Firefox 并不不是那么的不和谐，我们找到一定的方法，是完全可以让他们和谐共处的。不要你认为发现了兼容的办法，你就掌握了一切，我们并不是兼容的奴隶。
            
            p ul li 的嵌套顺序
            
            今 天只讲一个规则。就是
            • 的三角关系。我的经验就是

              在最外面，里面 是

              ，然后再是
              • ，当然
              • 里面又可以嵌套

                什么的，但是并不建议你嵌套很多 东西。当你符合这样的规则的时候，那些倒霉的，不听话的间隙就不会在里面出现了，当你仅仅是

                里面放

              • ，而不用
                的时候，你会发现你的间隙十分难控制，一般情况下，IE6和IE7会凭空多一些间距。但很多情况你来到下一行，间隙就没了，但是前面 的内容又空了很大一块，出现这种情况虽然你可以改变IE的Margin，然后调整Firefox下面的Padding，以便使得两者显示起来得效果很相 似，但是你得CSS将变得臭长无比，你不得不多考虑更多可能出现这种问题补救措施，虽然你知道千篇一律来兼容它们，但是你会烦得要命。
                
                具体嵌套写法
                
                上記のネスト方法に従って、
                を CSS で ul {Margin:0pxadding: 0px;list-style に指定します。 none;}。list-style:none を指定すると、ドットや数字などのディレクトリ タイプのタグが
                • タグの先頭に表示されなくなります。これは、IE と Firefox で表示されるデフォルトの効果が多少異なるためです。したがって、IE6、IE7、Firefox で表示される内容 (外側の余白、間隔、高さ、幅) にはほとんど違いはありません。ある時点では 2 つありますが、これはすでに完璧です。表示を制御するために大きな CSS を調整する必要はありません。通常、この互換性は 1 つまたは 2 つだけです。さまざまな場所に適応できるため、さまざまな互換性メソッドをさまざまな場所で繰り返しデバッグする必要がなく、トラブルが軽減されます。 ul.class1、ul.class2、ul.class3 {xxx:xxxx} を使うと互換させたい箇所を簡単に振り分けて互換させることができます。 p+CSS メソッドではほぼ無制限にネストすることができますが、上記のルールに従えば、よりリラックスして、半分の労力で 2 倍の結果が得られます。