ie6でボックスの間に縦方向のすき間ができてしまう

0
    画像を使って角丸のボックスを作る時に、ie6では縦方向に謎の隙間ができてしまいます。

    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

    ++++++++++++++++++++++++++++++++++++++++++++++++++
           
    コメント
    こんにちは、いきなりのコメント失礼します。
    《お小遣い稼ぎレポート》を運営しておりますkeiichiro0129といいます。
    ブログを拝見させていただきました。
    完全無料で使えるブログ【コンテンツパーツ】というものをご紹介させていただきます。

    〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
    ◎コンテンツレンタル料:無料
    ◎報酬:1日50アクセス位あれば月に3,000円程度
    〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

    このコンテンツパーツを張り付けるだけで、コンテンツ充実・閲覧リピート・アフェリエイトよりも堅実な収益を生み出すことができます。
    ※ブログ訪問者に、商品購入をお願いするものとは違います。

    詳しくは私のブログかサービス提供会社である「株式会社オッジPFT」のWebサイトをご覧ください。
    http://keiichiro0129.blog.fc2.com/
    http://oggipft.com/jigyou_pay?id=1

    アクセスアップやお小遣い稼ぎ、ブログの見栄え充実に役立つかと思います。
    気に入られましたら是非ご利用ください。
    • keiichiro0129
    • 2011/11/07 2:39 PM
    コメントする








       
    この記事のトラックバックURL
    トラックバック

    カレンダー

    S M T W T F S
         12
    3456789
    10111213141516
    17181920212223
    24252627282930
    31      
    << March 2024 >>

    エントリー

    カテゴリー

    アーカイブ

    recent comment

    リンク

    プロフィール

    検索

    その他

    モバイル

    qrcode