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; } |