on:2008年6月30日sponsorsanthonyshortのエントリーから、クロスブラウザのためのHTMLとCSSのテクニックの紹介です。Time簡単な意訳なので、詳細やキャプチャは上記エントリーを参考ください。サマリーdoctypeはstrictを使用し、正しいHTML/CSSを使用してください。スタイルをリセットするスタイルシートを使用してください。Firefoxでのレンダリングのために、テキストのスタイルシートに「-moz-opacity:0.99」を指定してください。0」を使用してください。画像のリサイズをCSS/HTMLで行わないでください。全てのブラウザでフォントのレンダリングを確認してください。「Lucida」は使用しないでください。テキストのサイズは「%」「em」で指定してください。フロート要素には「display:inline」「overflow:hidden」のどちらかを指定してください。「overflow:auto」がきいている包括箇所には「height」「width」などを指定してhasLayoutの値を「true」にしてください。CSS3のセレクタは、まだ使用しないでください。透過PNGは、まだ使用しないでください。borderなど要素ごとのレンダリングは、全てのブラウザで異なります。解決方法ブラウザごとのレンダリングを統一するために、スタイルのリセットを指定します。resetなどのスタイルシートがあります。7ではひどく表示されます。CSS/HTMLでは正しいサイズで指定を行います。フォントのレンダリングSafari3やFirefoxで、暗い色の背景に明るい色のテキストを表示する際、通常に指定した以上に明るく見せる方法があります。下記のスタイルシートを使用してください。※「p」は適宜変更してください。0.99;}</textarea>フォントの選択フォントの種類は、PCやMacなどOSごとに異なります。中には共通で使用できるフォントもありますが、スタイルシートで指定するとレンダリングに問題のあるフォントがあります。Sans」は指定しないでください。Safari(Mac)では美しく見えますが、IE(PC)では同じようにはレンダリングされません。フォントのサイズテキストをサイズ変更する機能はブラウザごとに異なります。IEではpx指定されたテキストはサイズを変更できません。全てのブラウザでテキストのサイズ変更を可能にする方法があります。解決方法ここで勧める方法は、body要素に「%」を使用して基準のフォントサイズを指定し、個別の要素に「em」を使用して調整してスタイルシートを作成します。※IEの場合、小さいサイズを指定するとと読めない場合があるので注意してください。rows="5">body{font-size:75%;line-height:1.5em;}h1{font-size:3em;}</textarea>フロート要素のダブルマージンIEでは、フロートしたdiv要素に指定したマージンの値が2倍になってしまいます。rows="5">#content{float:right;width:300px;margin-right:10px;}#sidebar{float:right;width:100px;}</textarea>解決方法フロートしたdiv要素に「display:inline」を指定します。rows="5">#content{float:right;width:300px;margin-right:10px;display:inline;}#sidebar{float:right;width:100px;display:inline;}</textarea>ボックスの拡張2つのボックスをフロートした際、左側のボックスの内包要素が包括要素の幅より長い場合、右側のボックスはIE6でフロートせずに落ちてしまいます。rows="5">#content{float:left;width:300px;margin-right:10px;display:inline;}#sidebar{float:left;width:100px;display:inline;}</textarea>解決方法overflowを使用すると、IE6でも期待通りにレンダリングされます。rows="5">#content{float:left;width:300px;margin-right:10px;display:inline;overflow:hidden;}#sidebar{float:left;width:100px;display:inline;overflow:hidden;}</textarea>フロートのクリアフロート要素を包括するdivが、内包要素の全体を包んでいない場合があります。解決方法いろいろな解決方法がありますが、シンプルな解決方法を紹介します。「overflow:hidden」を包括要素に指定します。「overflow:auto」はFirefoxで問題を起こすことがあります。IE6の場合はhasLayoutが原因なので、「height」「width」の指定や「zoom:1」を使用してください。CSSのセレクタIE6をサポートするするのであれば、新しいCSS3のセレクタは使用しないでください。3のセレクタはサポートされていません。解決方法もしIE6で、新しいセレクタを使用しなくてはいけない場合は、IE8.jsを使用すると使用できます。透過PNGIE6では、透過PNGをサポートしていません。解決方法3つの解決方法を紹介します。IEの「AlphaImageLoader」を使用します。sizingMethod='image/scale/crop');}</textarea>2つ目は、「iepngfix.htc」を使用する方法です。IE6は参照してください。3つ目は、IE8.jsを使用する方法です。他の2つに比べて、この方法が一番お勧めです。これら3つを含め、他の方法でもIE6で透過PNGを使用する場合は、IE6でのテストを入念に行ってください。