山辺の小川のブログで--ブラウザにまたがって互換性のあるCSSコードを書く金科玉律

4993 ワード
http://www.cnblogs.com/lhb25/archive/2010/06/19/1760786.html   元のWebページ
 
Webデザイナーとして、あなたのウェブサイトは様々なブラウザの中で完全に同じ表現を持っているのは多くの人の目標ですが、これは永遠に本当に実現できない目標です.多くの人は、完璧なブラウザ間の互換性は必要ないと思っています.そう言えば間違いありませんが、多情形では、近似的な互換性は実現しやすいと思っています.本稿では、ブラウザ間で互換性のあるCSS符号化のガイドラインとテクニックについて説明します.
 
CSSボックスモデルの理解
多くの奇抜な淫技を必要としないブラウザ間互換性のあるCSSコードを実現したい場合は、CSSボックスモデルを徹底的に理解することが最も重要であり、CSSボックスモデルは難しくなく、特定の条件のIEブラウザを除いて、すべてのブラウザを基本的にサポートします.
CSSボックスモデルは以下のことを処理します.
  • blcok(ブロック)レベルのオブジェクトがどれだけ大きな空間を占めるか
  • オブジェクトの境界、
    • を残す
  • ケースのサイズ
  • ボックスとページの他の要素の相対位置
    • CSSボックスモデルには以下のガイドラインがあります.
  • Block(ブロック)オブジェクトは矩形(実際にはすべてのオブジェクトがそうである)
    • です.
  • そのサイズはwidth,height,padding,borders,marginsによって決定される
  • 高さを設定しないと、その箱の高さは自動的にその含む内容に適応し、残白など(floatを使用しない限り)
    • を加える.
  • 幅を設定しない場合、float以外のボックスは、親コンテナ(親コンテナの白を除く)
    • に水平に満たされます.
    blockレベルのオブジェクトを処理する場合は、次の点に注意してください.
  • 箱の幅を100%に設定すると、margins、padding、bordersを設定することはできません.そうしないと、親容器
    • が破損します.
  • 垂直に隣接するmarginは複雑な崩壊問題を引き起こし、レイアウト問題(例えば2つの垂直に隣接するBlockオブジェクト、上のオブジェクトのbottom-marginが40、下のオブジェクトの  top-marginが20の場合、2つのオブジェクトの間隔は60-翻訳者ではなく40になります)
  • は相対位置と絶対位置のオブジェクトを有し、異なる動作
    • を有する.
    FirefoxのFirebugに表示されるボックスモデル
    ブロックの理解  レベルとinlineレベルのオブジェクトの違い
    この簡単そうな問題を徹底的に理解すれば、大きな利益を得ることができる.
    次の図では、blockレベルのオブジェクトとinlineレベルのオブジェクトの違いを説明します.
     
     
    次はblockレベルオブジェクトとinlineレベルオブジェクトの基本的な違いです.
  • Blockレベルのオブジェクトは、親コンテナを自然に水平に満たすため、幅100%のプロパティ
    • を設定する必要はありません.
  • Blockレベルのオブジェクトの最初の配置位置は、親コンテナの左上の境界であり、floatまたは絶対位置が設定されていない限り、その前の兄弟Blockオブジェクトの下に順に配置する
    • .
  • Inlineレベルのオブジェクトは、幅と高さの設定
    • を無視します.
  • Inline ， （ white-space, font-size, letter-spacing）
  • Inlineレベルオブジェクトvertical-alignプロパティを使用して垂直位置合わせを制御できます.blockレベルオブジェクトは
    • できません.
  • Inlineレベルのオブジェクトの下には、アルファベットgのような下に検出される筆画
    • に適応するための自然な空間が保持されます.
  • floatに設定inlineオブジェクトがblockオブジェクト
    • になります.
    FloatingとClearingのプロパティの理解
    マルチバーレイアウトを実現する最善の方法は、使用することです. float プロパティ、floatもあなたに利益をもたらすプロパティです.1つのfloatオブジェクトは左または右で、1つのfloatに設定されたオブジェクトは、設定された方向に応じて、親コンテナの境界、またはその前のfloatオブジェクトの境界に左または右に移動し、その後の非floatオブジェクトまたは内容に続くと、その反対方向に囲まれます.
     
    floatプロパティとclearプロパティを使用するいくつかの重要なガイドラインを次に示します.
  • floatオブジェクトは、自身が置かれているblockレベルの非floatコンテンツストリームから飛び出します.言い換えれば、boxを左floatに向けると、その後ろのblockレベルは非  floatオブジェクトは下に表示され、inlineレベルのコンテンツは
    • を囲む.
  • 一部の内容を片側から1つのfloatを囲む  オブジェクト、このコンテンツはinlineレベルか、同じ方向のfloat
    • に設定する必要があります.
  • floatオブジェクトは、幅が設定されていない場合、自動的に含まれるコンテンツの幅に縮小するので、floatオブジェクトの幅
    • を明確に設定ことが望ましい.
  • blockが1つあれば  オブジェクトにfloatを含める  サブオブジェクトは、本明細書で説明する問題が発生します.
  • clearプロパティが設定されたオブジェクトで、その前のfloatオブジェクト
    • を囲むことはありません.
  • clearとfloat属性が設定されたオブジェクトで、clear:left属性のみが有効であり、clear:rightは
    • には機能しません.
    まずはIEでテスト
    私たちはIE 6とIE 7を憎んでいますが、新しいプロジェクトを開始するときは、まずこの2つのブラウザについてテストしたほうがいいです.そうしないと、後期に設計してからIE 6とIE 7についてテストを行うことを思い出したら、以下の問題が発生します.
  • あなたはいくつかの奇抜な淫技を使用しなければならなくて、甚だしきに至っては独立したIE 6/7 CSSを使用して、CSSファイルの肥大化を招きます.
  • いくつかの場所のレイアウトは
    • を再設計しなければなりません.
  • では、テスト時間が
    • 増加します.
  • あなたのレイアウトはIE/6/7と他のブラウザで異なります
    • 個人的なプロジェクト、Webプログラムなどを設計している場合は、古いバージョンのIEに対して多くの仕事をすることをお勧めしませんが、一部の会社のサイトでは、ユーザーグループにIEユーザーが多く、これらのテクニックは多くの頭痛を避けることができます.IEの問題をIEのBUGに分類して処理しないと、多くのマイナスの影響をもたらし、IEと平和的に共存することはWeb開発と設計者が避けられない現実である.
    IE 6/7にはまだ多くのユーザー基盤がある国内(感謝中行、建行、農行、工行、各級政府サイト)では、この2つのブラウザを無視するのは極めて賢明ではありません.まずIE 6/7に対して設計を行うのは良い方法です.一般的には、IE 6/7にテストされたサイト、Firefox、Chrome、Safari、Operaなどの標準ブラウザの前ではほとんど問題が発生しません.前提は、あなたのCSS設計がW 3 C標準に基づいていることです.
    IEブラウザで最も一般的な問題
  • IE 6でfloatを乱用してはいけない.そうしないと、内容の消失や文字の重複などの奇妙な問題をもたらす.
  • IE 6では、floatオブジェクトは、float方向の向こうに2倍のmarginが現れ、displayをinlineに設定するとこの問題が解決します
  • IE 6/7では、hasLayoutを直接または間接的に設定していないオブジェクトでは、さまざまな奇妙な問題が発生します(このような問題に対して、zoomというcss属性は、normal以外の値にzoomを設定することで、オブジェクトhasLayoutがこのオブジェクトの視覚的外観に影響を及ぼさないようにすることができます).
  • IE6 min-width, max-width, min-height, max-height
  • IE 6は固定位置背景図
    • をサポートしていない
  • IE 6/7では、多くのdisplay属性値はサポートされていません(  inline-table ,  table-cell ,  table-row )
  • IE 6では、aというオブジェクトのみが使用できます:hoverという擬似クラス
  • IEの一部のバージョンでは、属性セレクタ、サブオブジェクトセレクタなどのCSSセレクタのサポートが少ない
  • IE 6~8 CSS 3へのサポートは限られている(ただし、いくつかのトランスフォーム方法がある)
    • すべてのブラウザで同じことを期待しないでください.
    異なるブラウザで同じ体験機能を実現することは可能であり、近似画素レベルの一貫した外観を実現することも可能であるが、そっくりであることは決して期待しないでください.
    Formコントロールはブラウザによって表示されます.
    以下は Facebook トップページのselectコントロールは、5つの異なるブラウザでの表示の違い( Adobe’s Browserlab スクリーンショット
     
     
    いくつかのFormコントロールは、ブラウザにまたがって一致しなければならない場合は、submitボタンの代わりに画像を使用することができますが、radio、select、textarea、ファイル選択ボックスなどのコントロールは、永遠に同じではありません.
    フォントの表現に違いがある
    まず、あるフォントはあるシステムには存在しません.すぐに存在します.Windows ClearTypeなど、異なるシステムでのレンダリング効果も全く同じではありません. IE 7はサポートされていますが、IE 6はサポートされていません.これにより、同じフォントがIE 7とIE 6で異なるようになります.
     
    CSSでクリア
    CSSクリアランス(CSS Reset)を使用することは、ブラウザ間での互換性を実現するための素晴らしい薬です.CSSクリアランスは、margin、paddingなどのプロパティに対する異なるブラウザのデフォルト表現を解消し、位置合わせ、ギャップなどの問題をより容易に制御することができます.推奨 Eric Meyer’s CSSクリアコード.
    「30日間iPhoneのプログラミングに精通」-Day 6-モバイルサイトナビゲーション
    ソケットプログラミングの例