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