ホームページ作成素材 Cool Liberty > WEBデザインチュートリアル > CSSの細かいバグ対策と裏技

CSSの細かいバグ対策と裏技

このWEBデザインチュートリアルでは、WEBブラウザごとのCSSの細かいバグ対策と裏技をレクチャーしていきます。

Windows版IE 5.5以前にだけ異なる設定をするには？

音声ブラウザの読み上げ音声の種類を指定するvoice-familyプロパティの値として「"\"}\""」を指定すると、\記号を用いたエスケープ処理に対応していないWindows版IE 5.5以前は、そこに含まれる「}」で指定が終了したと解釈しその後の指定を無視します。

これを利用して、先にWindows版IE 5.5以前に適用したい指定をした後に、voice-familyプロパティを以下のように指定し、その後に本来の正しい値を上書き指定します。Windows版IE 5.5以前は、ボックスの幅と高さの他、キーワードによるフォントサイズの指定で間違った解釈をしますが、主にそれらを修正する目的で利用されます。

■CSSソース

width: 300px;
voice-family: "\"}\"";
voice-family: inherit;
width: 200px;

Windows版IE 4～6とMac版IE 5.xだけに異なる設定をするには？

html要素はその構造上、最も上位に位置する要素であり、他のどの要素にも含まれることはありません。しかし、セレクタを半角スペースで区切って示す子孫セレクタを使用して、セレクタの先頭に「* html」のように指定しても、Windows版 4～6とMac版IE 5.xは、この部分のセレクタがないかのようにCSSを適用してしまいます（それ以外のWEBブラウザでは指定は無視されます）。

これを利用すれば、Windows版IE 4～6とMac版IE 5.xだけに適用させるCSSを指定できます。

■CSSソース

* html セレクタ {・・・}

全てのWindows版IE以外に異なる設定をするには？

Windows版IEは全て、「>」記号で示す子セレクタに対応していません。したがって、セレクタの先頭に「html>body」のように指定することで、Windows版IE以外のWEBブラウザだけに適用させるCSSを指定できます。

「html>body」は「html要素の子要素であるbody要素に含まれる～」という意味になるので、他のWEBブラウザではこの部分がない時と同様に解釈されます。なお、Mac版IE 5.xは子セレクタに対応しています。

■CSSソース

html>body セレクタ{・・・}

Windows版とMac版の全てのIE以外に異なる設定をするには？

Windows版とMac版も含む全てのIEは、[]を使って任意の属性とその属性値ｗｐ指し示す属性セレクタに一切対応していません。

属性セレクタを使用すれば、Windows版とMac版も含む全てのIE以外のWEBブラウザにだけ適用させるCSSを指定できることになります。

■CSSソース

属性セレクタ {・・・}

Mac版IE 5.xとそれ以外のWEBブラウザで別の値を指定するには？

Mac版IE 5.xは、コメントの終了を示す「*/」の直前に「\」を付けると、コメントが終了したと認識しなくなります。そして、次に「*/」が出現する場所で初めてコメントが終了したと解釈します。

これを利用すれば、Mac版IE 5.x以外のWEBブラウザにだけ適用させる指定をしたり、Mac版IE 5.xと別のWEBブラウザに異なる指定をすることも可能になります。

■CSSソース

/* コメント \*/
～この範囲内での指定はMac版IE 5.xには無視される～
/* コメント */
～これ以降の指定はMac版IE 5.xにも適用される～
～Mac版IE 5.xだけに適用したい値を指定～
/* コメント \*/
～Mac版IE 5.x以外に適用したい値で上書き～
/* コメント */

IE 6の配置に関するバグを解消するには？

Windows版のIEには、floatプロパティやpositionプロパティで配置に関する指定をした時に発生する様々なバグが確認されています。

例えば、背景が指定されている部分でfloatプロパティをを使うとテキストが表示されなくなったり、positionプロパティでは指定した通りの表示にならない場合などがあります。

多くの場合、このようなバグは問題のある部分を含むブロックレベル要素の幅または高さを指定することで解消されますが、場合によっては幅を指定できない場合もあります。

そのような時は、Windows版IEにだけ「height: 1%;」のように高さとしては極端に小さい値を指定すればいいのです。

IEには内容に合わせてボックスを勝手に拡張してしまうバグがあるため、このように指定しても通常と同じ状態で表示されるので問題はありません。しかし、他のWEBブラウザにはこの値を適用されないようにする必要があるため、先に紹介した「/* \*/」を使った裏技と「* html」を使った裏技を合わせて以下のように指定します。

■CSSソース

/* Hides from IE5-mac \*/
* html セレクタ { height: 1%; }
/* End hide from IE5-mac */

CSSの細かいバグ対策と裏技の評価を是非お願いします！
（星の上へマウスを乗せてクリックするだけでOKです）

  • Currently 3.10/5
  • 1
  • 2
  • 3
  • 4
  • 5

評価: 3.1/5 ( 621 投票 )

CSSの細かいバグ対策と裏技に関連する素材 & コンテンツ

目的に合ったコンテンツが見つからなかったあなたへ

このサイトでなら役に立つコンテンツが見つかるかも

0574 W.S.R