2009年04月10日

widthを使うときの注意点 その1

こんにちは。
溝上です。

今回はCSSのプロパティの中でもよく使われる「width」について書いていこうと思います。

widthは要素の幅を決める為に使いますが、指定しないとInternet Explorerでバグが起こることがあります。
以前に先輩がこちらで一部を書いています。

今回はwidthと一緒に使わないとバグが起きることがあるプロパティを紹介しようと思います。

floatを使う場合、background-imageと同時にwidthを指定しないと背景画像が正しく表示されないというバグです。
htmlコーディング例
<div class="section">
<div class="bk1">
<div class="inner">boxA</div>
<div class="inner">boxB</div>
<div class="clear"> </div>
</div>
</div>
(cssサンプル)
.section {
width:600px;
margin:0 auto;
}

.bk1 {
background-image:url(bk.gif);
background-position:left top;
background-repeat:repeat;
}

.bk1 .inner {
float:left;
width:298px;
height:50px;
border:1px solid #000000;
}

.clear {
clear:both;
width:0;
height:0;
font-size:1px;
line-height:0;
outline:none;
text-decoration:none;
text-indent:-9999px;
}
このサンプルをInternet Explorer6とFirefox1.5で見てみました。
▼Firefoxの場合▼

▼Internet Explorerの場合▼


見事にInternetExplorer6で真っ白になりました。
これを解決する為にはbackground-imageと同時にwidthをpx単位でつけると解決します。
(cssサンプル)
.bk1 {
width:400px;
background-image:url(bk.gif);
background-position:left top;
background-repeat:repeat;
}
▼Internet Explorer(widthを指定)の場合▼


ちゃんと表示されました。
サンプルの場合、innerクラスのfloat:leftを消しても背景画像は表示されるようになります。
ただfloatは消せない場合って多いですよね。
またInternet Explorerで背景画像がちゃんと表示されない場合はよくあるのですが、全部が全部floatのせいというわけではないみたいです。

昔はよく先輩とこんな会話をしていました。

「先輩、なんかIEで背景がちゃんと表示されないんです」
「widthは?」

「先輩、なんかIEでfloatがうまくできないんです」
「widthは?」

「先輩、なんかIE・・・」
「widthは?」

などなど。


最近は先輩に聞く前にwidthのつけ忘れを疑うようになりました。
表示崩れに遭遇したら悩む前にwidthを指定してみるといいかもしれません。
次回もwidthについてご紹介しようと思います。
 

HTML5&CSS3の最新情報はこちら → HTML5GOGO

posted by baba at 15:10 | Comment(0) | TrackBack(0) | テクニック
この記事へのコメント

この記事へのトラックバック
 
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。