タスク13-ブラウザ対応

4555 ワード

1.IEブラウザのデバッグ方法

  • IEブラウザ7+に付属の開発者ツールで、IE 6はborderの方法を採用するかvirtural IE 6をダウンロードして補助開発
    • を行うことができる.
  • は、IEtesterまたはchromeの有料プラグインTest IE
    • のような異なるバージョンのIEブラウザをシミュレータ方式でシミュレートする.
  • 仮想マシンをインストールすることによって、異なるバージョンのIEの実行環境をインストールしてIEブラウザをデバッグする目的
    • を達成する.

    2.CSS hackとは?CSSとHTMLでhackはどう書きますか?CSSでie 6、ie 7のhack方式?

  • 異なるブラウザまたはブラウザの異なるバージョンのウェブページ解析方式の異なる問題を解決するために、開発者は対応するcss codeを作成して互換性を達成し、このプロセス全体をcss hack
    • と呼ぶ.
  • css hackには、css属性接頭辞法、IE条件注釈法、セレクタ接頭辞法の3つの方法がある.css属性接頭辞法:
    • .box{
color:red; /* for all browsers */
_color:black; /*  for ie6 */
*color:green;  /* for ie6~7 */
color:pink\9;  /*  for ie6~10 */
}

    セレクタ接頭辞:
    *body{
/* only for ie6 */
}
*+p{
/*  for ie7 */
}
@media screen\9{
}
div{
/*   for ie6~7 */
}

    ie cc:
  • ie 6/7のcss hack
  • ie6 

    •      ：
.box{
_color:black; /*  for ie6 */
}
      ：
*body{
margin:0;
}
     ：




    - ie7

          ：
*+body{
margin:0;
}
     ：




    - ie6~7

           ：
.box{
*color:black; /*  for ie6~7 */
}
      ：
@media body\9{
margin:0;
}
     ：

    3.ブラウザ互換性の問題をいくつか挙げる

  • 異なるブラウザのラベルのデフォルトのmarginとpaddingは異なり、ソリューションは*{margin:0;padding:0;}
    • です.
  • ブロックレベル要素にfloatおよび左右のmarginが存在する場合、IE 6に表示されるmarginは設定よりも大きく、解決策はfloatスタイルを追加するラベルにdisplay:inline;
    • を加えることである.
  • ピクチャデフォルトピッチ:いくつかのブラウザは複数のimgラベルを並べたときにデフォルトピッチが現れ、解決策はfloat属性または並べ替え原理を使用する:display:inline-block特性を持つすべての要素には、コードの改行が空白に解析されるという特徴があります.なぜかというと、これがブラウザのレンダリングメカニズムです.この点に基づいて、コードが改行をクリアすれば解決できます.しかし、すべてのコードが混ざり合うことを望んでいない場合は、ブロック属性要素を同列に
    • 表示することを目的としてフローティングを設定することができます.
  • 透明度の問題:
    • selector{
filter:alpha(opacity=50); /* for IE*/
-moz-opacity:0.5;  /*for old versions of the Mozilla browsers*/
-khtml-opacity: 0.5;  /* for old versions of Safari*/
opacity: 0.5;
}
  • min-widthまたはmax-width:ie 6は最大または最小幅
    • をサポートしません.
    /*      */
.min_width{ 
min-width:300px; _width:expression(parseInt(this.clientWidth) < 300 ? "300px" : this.clientWidth);
}
/*      */
.max_width{ 
max-width:600px; _width:expression(parseInt(this.clientWidth) > 600 ? "600px" : this.clientWidth);
}

    4.互換性、マルチブラウザの上書きについてどう思いますか?漸進的な強化と優雅な降格はどういう意味ですか?

  • 対応マルチブラウザの見方:
  • 需要を分析し、互換性の必要性があるかどうかを分析します.特定のブラウザに対するユーザは、ページのユーザ、設計に参加するユーザ、ユーザのブラウザタイプの使用状況など
    • を含む.
  • の互換性は、高度なブラウザページのコンテンツ表示に対する要求が高く、低レベルのブラウザでは通常のページ表示に影響を与えることなく
    • を低減することができる.
  • の全体的な原則は、コストと利益の間のバランスに基づいて
    • を考慮することである.
  • の漸進的な強化と優雅な降格の観点は、漸進的な強化と優雅な降格を比較するのは、異なるブラウザに互換性を提供する目的のためであり、実際の開発時の考え方が異なるだけである.
  • の漸進的な強化は、低レベルブラウザに基づいて開発され、その内容、スタイル、インタラクションのニーズを満たした後、より高度なブラウザに対して設計、インタラクションなどの強化を実現する.
  • 優雅な降格は高級ブラウザに基づいて開発され、高級ブラウザの各要求を完成した後、低級ブラウザが高バージョンの機能をサポートできない問題に対して、機能、設計などのモジュールの徐々に退化を実現し、退化の過程でホームページの基本機能と情報の実現を保証することができる.


    • 5. reset.cssとnormalize.cssはそれぞれ何をしていますか?なぜnomalizeを推奨するのか。css?


    まず、異なるブラウザまたはブラウザの異なるバージョンがページをサポートおよびレンダリングする際に発生する違いにより、開発者はブラウザの互換性を必要とします.この問題に対して、ネットの大牛たちは何とかして異なる解決策を考え出した.cssとnormalize.cssという2つの異なる考え方の互換性問題を解決する案が誕生した.
  • reset.cssは、異なるブラウザのデフォルトスタイルが異なるという問題を早期に解決する方法であり、主な考え方は、cssドキュメントの初期部分で異なる要素のスタイルをリセットし、異なるブラウザが初期スタイルで標準を統一することである.しかし、この方法の欠陥は暴力的すぎて、すべての要素を同じ扱いし、ulラベルのような接頭辞を使うと、再設定し、資源を浪費しなければならないことだ.この時、この問題を解決する新しい考え方が生まれた--normalize.css.
  • normalize.cssは、有用なブラウザのデフォルトスタイルを保持した上で、異なるブラウザに共通スタイルの仕様、すなわち、異なるブラウザで発生する互換性の問題に対して分類された最適化案を提供する.
  • これによりresetが分かる.cssは天屠龍記の七傷拳に頼るようだ--人を傷つけようとして、先に自分を傷つけて、reset.cssはスタイルを統一するには、まず自分のデフォルトスタイルを何度も破壊しなければならない.そしてnormalize.cssは武当の太極拳のようなもので、スタイル基準を統一した上で、ブラウザのデフォルトスタイルを維持することができます.以上より、normalize.cssはブラウザの互換性を解決する最新であり、現在見ている最高の案でもある.

    • 6.IEボックスモデルと標準ボックスモデルの違いは何ですか?IE 7、8に標準ボックスモデルを使用するにはどうすればいいですか?box-sizing:border-boxはどんな作用がありますか?

  • IEボックスモデル:width=border+padding+content.W 3 Cボックスモデル:width=content.
  • IE 678標準ボックスモデルを使用:htmlの一番前に宣言を追加します.
  • box-sizing:border-box作用:ボックスモデルをIEボックスモデルに設定して幅を計算します.
    • Silverlight WebHostの構成情報を取得します.WebClientとXmlSerializerシミュレーションです.
    css filter詳細