Top > Blog > CrossBrowser

画像の下にできるスペースを消す

たとえば次の例のように、ページ右下に画像を配置すると･･･ 

上記サンプルのHTMLコード
<div style="
          width:300px;
          height:200px;
          border:solid 1px green;
          position:relative;">
    <div style="
                   position:absolute;
                   bottom:0px;
                   right:0px;
                   margin:0px;
                   padding:0px;">
        <img src="btn_pagetop.gif" alt="" border="0"/>
    </div>
</div>

IE6だと、
IE6で表示した場合
のように画像の下に空白ができます。

これはバグというよりも、IE6だけimg要素の vertical-align プロパティの初期値が違う事が原因だそうで、 上記のHTMLでimg要素に “vertical-align:bottom;” とすると、IE6でも同じ配置になります。 

上記サンプルのHTMLコード
<div style="
          width:300px;
          height:200px;
          border:solid 1px green;
          position:relative;">
    <div style="
                   position:absolute;
                   bottom:0px;
                   right:0px;
                   margin:0px;
                   padding:0px;">
        <img src="btn_pagetop.gif" alt="" border="0"
                style="vertical-align:bottom;"/>
    </div>
</div>

こういう微妙なレイアウトの問題は、vertical-alignやline-heightの仕様をしっかり頭に入れておいた方が良さそうです。

実践 Web Standards Design ~Web標準の基本とCSSレイアウト&Tips~
実践 Web Standards Design ~Web標準の基本とCSSレイアウト&Tips~
技術評論社 2008-11-29
売り上げランキング : 14842

おすすめ平均 star
starまた紐解きたい本。
starWeb標準の学習にいい
star難しそうだけどわかりやすい

Amazonで詳しく見る by G-Tools
[2009/08/26]

Posted in CrossBrowser | No Comments »

コメントの投稿