AX
【CSS】floatを指定した時にできる隙間
InternetExplorer(以下IE)で発生する不具合の話。
DIVタグやTABLEタグなどのブロック要素を横に並べて表示したい時に使える
スタイルシート(以下CSS)のfloat。

例えば、テーブル(表)を二つ並べたい時。
普通にTABLEタグを書くとTABLEタグはブロック要素なので
表示されるテーブルの前後に改行が発生する。

■ コード
<table border="1">
<tr><td>一個目のテーブル</td></tr>
</table>
<table border="1">
<tr><td>二個目のテーブル</td></tr>
</table>


■ 表示結果
一個目のテーブル二個目のテーブル

そこで、CSSでfloatを指定する。するとこうなる。

■ コード
<table border="1" style="float:left;">
<tr><td>一個目のテーブル</td></tr>
</table>
<table border="1" style="float:left;">
<tr><td>二個目のテーブル</td></tr>
</table>


■ 表示結果
一個目のテーブル
二個目のテーブル


というわけでめでたくブロック要素であるTABLEタグを横並びに表示することができたのだが、
IEでこれと同じことをしようとすると少しおかしなことになる。
というか、IE6で起こった話なのでIE6だけかも。

IE6でブロック要素にfloatを指定した場合、
floatを指定していない要素の間に謎の隙間が生まれる


つまり以下のようになる

■ コード
<table border="1" style="float:left;">
<tr><td>一個目のテーブル</td></tr>
</table>
<table border="1">
<tr><td>二個目のテーブル</td></tr>
</table>


■ IE6の場合の表示結果
(Safariで見た場合に見た目を再現させる書き方で表示しています。(つまり上記コードではないです))
一個目のテーブル二個目のテーブル

■ Safariの場合の表示結果
(上記コードそのまま)
一個目のテーブル二個目のテーブル

ということで、IE6でもSafariでも同じように表示されるように一番最初に書いた書き方が必要なことがわかった。
つまり、隙間を発生させたくなければとなり合うブロック要素全てにfloatを指定する必要があるということ。

仕事で使って、marginやpaddingを0にしても隙間が消えないからどうしたものかと悩んでしまった。
IEのバグにはいつも悩まされます。。。(==;
[PR]
by manodeldio | 2012-02-23 00:29


<< 【CSS】bottom:0を指... 【謹賀新年】今年もよろしくお願... >>