inline-blockの手軽な書き方

| コメント(0)
inline-block要素はとても使い勝手がよいですが、
古いブラウザ向けの記述などが必要で少し面倒だったりします。
その中で、下記のものはかなり簡潔に書けるため前から愛用しています。
(ずっとメモしたものを使っていたため、引用元は失念してしまいました・・)

「divA」という要素をinline-block要素にする場合、

#divA {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

これだけでIE6まで対応できます。
何より、余計なdivや幅指定が必要ないのでとても使いやすいです。

ちなみにinline-block要素を並べると、ソース上の改行が
半角スペースになってしまうため要素間が開いてしまいます。

そういう場合は単に改行を取ってもいいですが、
divAの親要素に

font-size: 0;

を指定し、
divAに正しいフォントサイズを指定すると楽です。


●2013/4/9 追記
上記のフォントサイズの方法では、WindowsのSafariで上手くいかないようです。
(フォントサイズが0にならず空白が開いてしまう。)

ただ、Windows Safari のシェア数自体はそれほど多くないので、
多少余白が増えても問題ない場合は気にしなくていいかもしれません。

厳密に隙間なく並べる必要がある場合は改行をとってしまうか、

<div>aaaaaaa</div><!--
--><div>bbbbbbb</div>

上記のようにコメントアウトで改行を挟むことで
ある程度見やすさを保ちつつ実現できます。


コメントする

このブログ記事について

このページは、gravity-worksが2013年3月 6日 10:18に書いたブログ記事です。

ひとつ前のブログ記事は「IE6:div内の最後の要素が落ちてしまうときの対処法」です。

次のブログ記事は「Google Chromeで印刷に対応する」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。