【XHTML＋CSS】09_CSSトラブルシューティング

CSS Nite ビギナーズの連動書籍「現場のプロから学ぶXHTML+CSS）」を元に、自分自身が理解しやすいような形で要約メモしておきたいと思います。

フロートしたはずの要素が横並びにならない（IE6）

IE6には、フロートした要素にマージンを指定すると、フロート方向のマージンが倍近くに増加するというバグがある。

display:inlineを追加する

問題のある要素にdisplay:inlineを追加する。CSSの仕様上、floatプロパティがnone以外の要素は、displayプロパティの値が強制的にblockに変換されるため、実際にdisplayプロパティの値を変更することにはならないが、このバグへの対策としては有効。

子要素にマージンを指定する

フロートした要素そのものに対してマージンを指定することがIE6での問題の原因なので、子要素など内側のボックスに対してマージンを指定することで回避できることがある。

ボックス間の上下マージンが指定通りに表示されない

たとえば上下の隣接するボックスのマージンでは、大きい方の値が採用される。floatプロパティがnone以外のボックスや、positionプロパティがacsoluteまたはfixedのボックスについては、マージンは相殺されない。

heightプロパティで100%が適用されない

たとえばdiv#boxに対してheight:100%;と指定しても、ブラウザのウインドウの高さいっぱいには表示されない。div#boxを内包するボックスの高さを明示することでこの問題が解決できる。div#boxがbody要素の直下に置かれているならば、html要素とbody要素にもheight:100%;と指定しておく。

IE6以外のモダンブラウザでは、内容の高さがブラウザの高さを超えたときに表示が崩れてしまう場合があるので、ボックスの最小高を示しておく。

html, body {
	height: 100%;
}
div#box {
	height: 100%;　/*IE6以外のモダンブラウザに適用*/
}
body > div#box {
	height: auto; /*IE6以外のモダンブラウザに適用*/
}

フロートした要素の親要素の背景が表示されない

たとえばdiv#containerの中にdiv#mainとdiv#sideを含めている場合、div#containerに背景を指定していて、div#mainを左に、div#sideを右にフロートさせた場合、背景がそれらの範囲まで塗りつぶされず、上に詰まった感じに表示される。これは、div#containerにclearfixを適用することで解決できる。

オリジナルのclearfix

.clearfix:after {
content:".";
display: block;
height:0px;
clear:both;
visibility:hidden;
}
.clearfix {
display:inline-table;
}
/* Mac版IEには適用しない*/
*html .clearfix {
height: 1%;
}
*+html .clearfix {
height: 1%;
}
*clearfix {
display: block;
}
/**/

簡易的なclearfix

.clearfix {
	overflow: hidden;
}
/*IE6に適用*/
* html .clearfix {
	zoom: 1;
}

フロートした要素の後続要素に左右マージンが適用できない

横並びになったふたつの要素について、ひとつ目の要素にはフロートを、ふたつ目の要素はフロートせずに左右マージンを指定して離したい場合、離れずに密着する。離したい距離15pxと指定するのではなく、画像の幅400pxを足した415pxと指定することで解決する。

ブラウザごとにz-indexプロパティの挙動が異なる

通常のブラウザとIE6/7とでは、ボックスの重なり順序を決める仕組みが異なるため、z-indexプロパティの解釈が異なる。この問題は、親ボックスにもz-indexプロパティを指定することで解決する。

ズーム時にレイアウト崩れが発生する（IE7）

IE7のズーム機能で、ズーム時にフォームパーツや画像などがずれて表示されることがある。IE独自のhasLayoutという仕組みが関係している。これは、すべての要素にletter-spacing:0;を適用して解決する。

/* IE7の「hasLayout」問題を解決 */
*:first-child+html * {
letter-spacing: 0;
}

fontプロパティが適用されない

ショートハンドで指定しても、適用されないことがある。フォントに関するプロパティは、ショートハンドを使わず個別に指定することで解決できる。

フォントサイズを変更したら画像がずれる（IE6）

IE6で文字サイズを変更したとき、縦に並べている画像の表示位置がずれることがある。画像が含まれるボックスに対して、フォントサイズと行の高さをごく小さい絶対値（1pxなど）を指定することで解決できる。IE6のみに適用するために、IE6用のCSSハックを利用し、問題が発生している部分に適用する。

/* IE6で文字サイズ変更時の画像のずれを回避 */
* html #gnav ul li {
	font-size: 1px;
	font-height: 1px:
}

リストマーカーが表示されない

ブラウザによって、リストマーカーの表示スペースをどちらのプロパティでコントロールしているかが異なるため、ul要素とol要素のpadding-leftとmargin-leftプロパティで、左パディングと左マージンを2〜3em程度確保すれば表示される。

長い英数字や記号、URLを含めるとテーブルセルが広がってしまう

ボックス内での自動改行や禁則処理をコントロールするword-breakがあるが、一部のブラウザしかサポートしていないので、
JavaScriptライブラリのwordBreak.jsを利用する。table要素にclass=”wordBreak”を指定することで、この問題を解決できる。

フォームパーツが適切な位置に配置されない（IE6/7）

IE6/7には、margin-leftとwidthプロパティが指定されたブロックレベル要素内の先頭にinput要素やtextareaがあると、適切な位置に表示されないバグがある。この問題は、ブロック要素にdisplay: inline;を適用することで解決できるが、要素そのものの性質が変わってしまうため、margin-leftではなくpadding-leftプロパティで余白を設定する。

フォームパーツの不揃い感を解消したい

input要素やtextarea要素はXHTML上で幅が指定できるが、ブラウザによって表示が異なるのできちんと揃えることは難しい。幅を揃えたいinput要素にclass=”solid”と指定しておき、そのパーツにだけ適用されるようにすることで解決できる。

フォームパーツにフォーカスしたときに背景色が変わらない

IE6/7は疑似クラスをサポートしていないため、フォーカス時のスタイルを指定することができない。jQueryを利用して、:focus疑似クラスと同様の効果を実現できる。

jquery-focus.js

$(function(){
$("a, input, select, textarea").focus(function(){
$(this).addClass("focus"); 　}).blur(function(){
$(this).removeClass("focus"); 　}) });

次に、head要素内にscript要素を指定し、Javascriptファイルを読み込む

1 2	<script type="text/javascript" src="jquery-1.2.6.min.js"></script> <script type="text/javascript" src="jquery-focus.js"></script>

フォーカス時のスタイルは、CSS上でfocusというクラス名をつけて指定する

1	a:focus { } input.focus, select.focus, textarea,focus { }

外部リンク

»CSS Nite in Ginza, Vol.28フォローアップ | CSS Nite公式サイト

こちらの関連記事もあわせてどうぞ！

返信をキャンセルする。