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