ie6でボックスの間に縦方向のすき間ができてしまう
下に書いてあるコードのような場合に、その隙間は現れます。
<div id="top"><img src="box_top.png"></div>
<div id="middle">内容をここに書く</div>
<div id="bottom"><img src="box_bottom.png"></div>
body{font-size:12px;}
#top{
height:6px;
width:200px;
}
#middole{
back-ground-image:url(box_middole.png) repeat-y;
width:200px;
}
#bottom{
height:6px;
width:200px;
}
よくあるカタチの角丸ボックスを作るhtmlとcssです。
ワタシのサイトでは、これのmiddleとbottomの間に10px位のスペースができました。
この現象は、box_bottomの画像の高さが、bodyのフォントサイズよりも小さい時に起こるらしいです。
bodyのフォントサイズ14pxが画像の高さよりも優先されて、隙間が出来るという意味不明のバグです。
解決法 その1
解決法として、divの#middleや#bottom(ワタシの場合)に「font-size;1px 」を入れてあげると直るようです。
ワタシは#bottomに入れたら直りました。
解決法 その2
divの#middleや#bottom(ワタシの場合)に「overflow:hidden; 」を入れてあげても直るようです。
font-sizeでも構わないんですが、あまり小さくしてしまうと、スパム扱いされることもあるそうなので、この方法で直るようならこっちを使った方がよろしいみたいです。
まとめ
ちなみにワタシはfont-sizeとover-flowの両方を指定したら直りました。
状況によって変わると思うので、いろいろ試してみるのがいいと思います。
ie6忙しい時はイライラしますが、ちょっとややこしい位ができたとき気持ちいいし、まだまだie6健在ですのでがんばるしかないですね。
有限会社アンブレラ STUDIO TEMPO
〒530-0056 大阪市北区兎我野町5-6 栄ビル201
TEL/FAX:06-6367-4413/06-6367-4414
++++++++++++++++++++++++++++++++++++++++++++++++++
- 2011.10.28 Friday
- css
- 14:02
- comments(1)
- trackbacks(0)
- -
- -
《お小遣い稼ぎレポート》を運営しておりますkeiichiro0129といいます。
ブログを拝見させていただきました。
完全無料で使えるブログ【コンテンツパーツ】というものをご紹介させていただきます。
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
◎コンテンツレンタル料:無料
◎報酬:1日50アクセス位あれば月に3,000円程度
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
このコンテンツパーツを張り付けるだけで、コンテンツ充実・閲覧リピート・アフェリエイトよりも堅実な収益を生み出すことができます。
※ブログ訪問者に、商品購入をお願いするものとは違います。
詳しくは私のブログかサービス提供会社である「株式会社オッジPFT」のWebサイトをご覧ください。
http://keiichiro0129.blog.fc2.com/
http://oggipft.com/jigyou_pay?id=1
アクセスアップやお小遣い稼ぎ、ブログの見栄え充実に役立つかと思います。
気に入られましたら是非ご利用ください。