Biffy Clyro を聴きながらこんばんは。
今までグローバルメニューを作るときは大抵
<ul>タグを使ってfloat：leftかdisplay:inlineで横並びにしたリスト要素としてマークアップすることが多かったのですが、
本日、その他に横並びのメニューを作るのにとても便利な方法があることに気がつきましたので
メモがてらにアップ。
今まで恥ずかしながら知らなかったのですが、
ｕｌ要素に対して、displayプロパティでinline-blockを指定してあげると
中に入る文字数に応じて一つ一つのボタンの横幅が自動で最適化されるブロック要素のメニューを簡単に作ることができるようです。
元々、display:inline-blockはインライン要素のものに幅や高さを指定したり、背景画像を指定したりと
タグの外側にはインライン要素の特性を保ったまま、要素の内側のみブロック要素のような振る舞いをしてくれるようになる便利なプロパティなのですが、
IE５、６、７の場合、元々インライン要素のものに指定する場合のみしか対応していないようですので、
これらのブラウザに対しては限定的に
/display:inline;
/zoom:1;
を指定してあげると同じような振る舞いをするとのこと。
（頭の「/」はIE5,6,7用ハック）
よくまとまっているページを見つけましたので、
リンクを貼っておきます。
・ヨモツネット
http://www.yomotsu.net/wp/?p=390
これでIE8、opera、google Chrome、Firefox3に加え、一部しぶとく生き残っているIE6,7勢にも対応してくれるようなのですが、
（一部とは思いますが）firefox1とか2を使っている人向けの対応方法がまだ不透明な感じです。
display：inline-blockの指定の前に、独自プロパティの
display: -moz-inline-box;を指定することで解決するらしいのですが、
手元で動作確認ができない為にイマイチ出来ているのかどうか…。
ともあれ、これでボタンの内容量に応じて自動で幅を可変してくれるグローバルが作りたい放題の予感！
PR
