2013年3月アーカイブ

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>

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


このアーカイブについて

このページには、2013年3月に書かれたブログ記事が新しい順に公開されています。

前のアーカイブは2013年1月です。

次のアーカイブは2013年4月です。

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