display: inline-block;

She might have found her way. > Jul 01, 2008 > display: inline-block;

Jul 01, 2008

なんか Firefox 3 は display: inline-block; が使えるらしい！

これで Opera, IE, Firefox, Safari で使えるようになったわけなのでもう使っていくしか！

Firefox 3が対応したdisplayプロパティの値（1） - builder

この記事だと IE で inline-block 値が IE8 以上で使えるみたいなこと書いてあるけど IE6 から既に使えるんですよね。殊更に IE8(ベータ版) とか書いてあるってことは、何か仕様が変わったのかな? *1

そういえば昔テキストサイトやってた頃、カスイケスレに晒されたことが一度だけあって、そのときのサイトでは display: inline-block; を使っていました（そしてそのサイトは、晒されたことが分かった瞬間に閉鎖しました。すぐサイトを閉鎖して新しいのを作る感じのサイト管理人でした。今も似たようなもんだけど）。んで当時 Opera もとっくに採用していたのですが、まだ Firefox が Firebird だったか Phoenix だったか更にそれ以前だったかで、 Netscape wwww とか思って超軽視していた頃でした。懐かしい。あの頃が今ならネットスケープゲラとか呼んでたんだろうなぁ。でも今じゃ IE 滅びろですからね。IE 滅びろ！

…… Firefox をメインで使うようになってみると、 inline-block が使えなくて、これまで封印してきましたが、実際問題本当に使いやすいんですよね。ありがとう！

sample

Inline Block Inline Block Inline Block Inline Block Inline Block

source

<div style="margin:10px 20px; line-height:62px; text-align:center;">
  <span style="display:inline-block; width:100px; height:60px; background-color:#cef; color:#369; border:1px solid #bde;">Inline Block</span>
  <span style="display:inline-block; width:100px; height:60px; background-color:#cef; color:#369; border:1px solid #bde;">Inline Block</span>
  <span style="display:inline-block; width:100px; height:60px; background-color:#cef; color:#369; border:1px solid #bde;">Inline Block</span>
  <span style="display:inline-block; width:100px; height:60px; background-color:#cef; color:#369; border:1px solid #bde;">Inline Block</span>
  <span style="display:inline-block; width:100px; height:60px; background-color:#cef; color:#369; border:1px solid #bde;">Inline Block</span>
</div>