2061216作業

3711 ワード

  • CSS hackとは


    • Internet Explorer、Safari、Mozilla Firefox、Chromeなど、異なるメーカーのブラウザ、または同じメーカーのブラウザの異なるバージョン、例えばIE 6とIE 7では、CSSの解析認識が全く同じではないため、生成されたページの効果が異なり、私たちが必要とするページの効果が得られません.この時、私たちは異なるブラウザに対して異なるCSSを書いて、異なるブラウザの中でも私たちが望んでいるページの効果を得ることができるようにする必要があります.これをCSS hackと言います.

  • ブラウザの互換性についてお話しします


    • つまり、製品を作るときは、このサイトがブラウザの互換性を行うかどうかを考えなければなりません.互換性が必要な場合は、ieに互換性を持たなければなりません(一般的にpcサイトの互換性はieブラウザであり、国産ブラウザはchromeとieコアであり、firefoxsや他のブラウザが自動的にアップグレードされるのは最新のものに相当します).互換性があるなら、やるなら?
  • やるかどうか
  • 製品の角度(製品の参加者、参加者のブラウザ比率、効果優先、または基本機能優先)
    • .
  • コストの観点(何かをする必要があるかどうか)
  • どこまで
  • どのブラウザがどのような効果をサポートするか
    • のやり方
  • 互換性要件に基づいて技術フレームワーク/ライブラリ(jquery)
    • を選択する.
  • 互換性ニーズに応じて互換性ツール(html 5 shiv.js、respond.js、css reset、normalize.css、Modernizr)
    • を選択
  • postCSS
  • 条件注釈、CSS Hack、is能力検査はいくつかの補修
    • を行う.

  • 5種類以上のブラウザ互換性のある処理の詳細を列挙

  • 二倍余白左/右余白が割り当てられたフローティング要素がある場合、IE 6は余白を二倍化します.例えば、margin-left: 5px；は10 pxになります.この問題は、フローティング要素にdisplay:inlineを追加することによって解決することができる
    • div#content {
  float:left;
  width:200px;
  margin-left:10px;
  display:inline;
}
  • IEの最小高さIEはmin-height属性を無視し、以下のhackで修復することができる.
    • selector {
min-height:500px;
height:auto !important;
height:500px;
}
  • IEデフォルトの垂直スクロールバーを無効にするデフォルトでは、コンテンツがウィンドウサイズに適合していても、IE 6およびIE 7には垂直スクロールバーが表示されます.overflow:autoを使用して、スクロールバーを必要なときにのみ表示できます.
    • html {
 overflow: auto;
}
  • IE 6、IE 7互換inline-block 
    • .target{ 
display: inline-block;
*display: inline; 
*zoom: 1;
}
  • フローティング
    • をクリア
    .clearfix:after{
 content: ' '; 
display: block; 
clear: both;
}
.clearfix{
 *zoom: 1;   /*   ie67   */
}

  • 以下のツール/名詞は何をしていますか。

  • 条件注釈条件注釈(conditional comment)は、HTMLソースコードにおいてIEによって条件付きで解釈される文である.条件注釈は、IEにコードを提供および非表示にするために使用され得る.
    • 

alert(1);

    条件コメントを使用したページはWindows Internet Explore 9では正常に動作しますが、Internet 10では正常に動作しません.IE 10では条件コメントはサポートされていません
  • IE Hackは、CSS属性接頭辞法、セレクタ接頭辞法およびIE条件注釈法により、IEブラウザのみが認識できるcssスタイルを書く.例:
    • .box{
 color: red; 
_color: blue; /*ie6*/ 
*color: pink; /*ie67*/ 
color: yellow\9; /*ie/edge 6-8*/
}
  • jsコンピテンシー検出は、ブラウザが現在のオブジェクトのプロパティまたはメソッドをサポートしているかどうかを確認し、ページテキストの内容を取得することで互換性を理解し、関数またはオブジェクトをカプセル化してこのような問題を解決することです.
  • html5shiv.jsは、IE 9の次のバージョンのブラウザがHTML 5の新規タグを認識せず、CSSが機能しないという問題を解決するために使用されます.
  • respond.js Respond.jsは、ブラウザでサポートされていないオリジナルAPIを実現するためのコードである高速で軽量なpolyfillです.IE 6-8およびCSS 3 Media Queriesをサポートしていない他のブラウザに対してメディアクエリのmin-widthおよびmax-width特性を提供し、応答型ウェブデザインを実現する.(IE 6-8にCSS 3 Media Queryをサポートさせる)
  • css reset各ブラウザには、*{margin:0;padding:0}が最も簡単なcss resetであるなど、独自のデフォルトスタイルや共通のデフォルトスタイルがあり、レイアウト上の悩みを引き起こすことがあります.css resetの役割は、これらのデフォルトスタイルをリセットし、スタイルを一致させることです.
  • normalize.css Normalize.cssはカスタマイズ可能なCSSファイルで、異なるブラウザがWeb要素をレンダリングするときに形式をより統一します.参照
  • Modernizr ModernizrはオープンソースのJSライブラリであり、訪問者ブラウザの違い(新しい標準のサポートの違いを指す)に基づいて異なるレベルの体験を開発するデザイナーの仕事をより簡単にします.これにより、デザイナーはHTML 5とCSS 3をサポートするブラウザでHTML 5とCSS 3の特性を十分に利用して開発することができ、これらの新技術をサポートしない他のブラウザの制御を犠牲にすることはありません.参照1参照2
  • postCSSプラットフォームとして理解でき、いくつかのプラグインを上に走らせることができます.CSSを抽象構文ツリーに解析することができます.PostCSSというプラットフォームを通じて、いくつかのプラグインを開発して、CSSを処理することができます.Autoprefixerリファレンス1参照2
    • などの人気プラグイン
    文章の著作権は飢えた人の谷に帰る_sunnyと飢人谷の所有、転載は出所を説明しなければならない
    React-0|初食
    毕设中antで出会った様々な问题