line-height+heightが定石だが、なぜか一部のブラウザで通用しないので、paddingの上下のみを使って行う。

FxやOpera、Safari向けにはinline-blockを指定すればいいだけの話だが、IEではinline-blockはまともに動かない。

しかし方法がある。 http://www.yomotsu.net/wp/?p=390
この方法を使えば普通にinline-blockがIEでも動く。

しかしこの2つの記述は共存出来ないため、条件分岐を使って別々に読み込ませるなりCSS Hackを使うなりする。

今回は条件分岐を使った。

http://blog.worldending.jp/archives/2007/04/internet_explorer.php#notebook

http://www.aboutworks.com/shokodei/diary/doc/select/

たとえ<td>に何かの要素を指定していても<tr>に適用すれば上書きされる。

いや当たり前なんだけど、一応メモ。

http://jmblog.jp/archives/88

つまりIE6で透過PNGを表示させる場合と同じようにhtcファイルを別途で読み込む。
わずかとはいえパフォーマンスは低下するはずなので、できればa要素に適用できればそうしたほうがいいね。

XML宣言を取り払えば他のブラウザと同じように動作した
IE5.5では全く動作していない状態だけどたぶん対応していないからそうしているんだろう、中途半端に動作するよりよっぽどましさ

中央寄せもblock要素なのでmargin:autoが効く。

display: inline-block;  /* 正当な指定。インラインブロックとして振る舞う */
display: -moz-inline-box;     /* Firefox2.xは上に未対応なので独自のやつで。 */
zoom: 1; *display: inline;    /* hasLayoutをかまし、さらにIEだけにinline指定。 */

Firefox2はそもそもinline-blockに対応しておらず、-moz-inline-boxで代用することになる。が、完全に互換性があるわけじゃないので色々と大変。

-moz-inline-boxの適用されたboxの中で、Firefoxの画像配置の仕様を他のブラウザに合わせる”vartical-align:bottom”が適用されていて、かつハイパーリンクされている画像の上に空白が出来るようになったので、この1つ前の記事で書いたCSS HackでFirefox2のみvartical-align:baseline;(クリア)を適用した。まあとりあえず今後また困るようなら今回の646行目あたりのコードを参照ということで。(自分用)

.foo, x:-moz-any-link { } /* FireFox 2 */
.foo, x:-moz-any-link, x:default { } /* FireFox 3 */
html>/**/body .foo, x:-moz-any-link, x:default { } /* Only FireFox 3 */

http://snipplr.com/view/7043/firefox-3-css-hack/

display:blockではなくdisplay:inline-blockを使い、widthにはautoを指定する
これにmargin:autoを付ければ中央寄せボタンの完成

なんかすぐ忘れる

white-space: nowrap;

を早速追加した