CSS, display:inline-block を使う

CSS display : inline-block
ブロック要素だけどインライン要素のように振る舞ってくれる。
width, height…などブロック要素にしか使えないプロパティを設定できて便利。

コリャご機嫌と使っていたら意外な落とし穴・・・

IE
display : inline-block はインライン要素のタグにしか有効にならない。
ブロック要素のタグに設定しても無視される。

FIrefox
display : inline-block は全ての要素に有効にならない。

でこんなのどうだろうな話。

インライン要素

/* inline */
a.inline-block {
	display:-moz-inline-box; /* for mozilla */
	display:inline-block; /* for Opera & Safari & IE */
}

ブロック要素

/* block */
div.inline-block {
	display:-moz-inline-box; /* for mozilla */
	display:inline-block; /* for Opera & Safari */
	zoom:1; /* has layout */
}
/* IE6 */
* html div.inline-block {
	display:inline;
}
/* IE7 */
*:first-child+html div.inline-block {
	display:inline;
}

コメントを残す

This site uses Akismet to reduce spam. Learn how your comment data is processed.