line-height+heightが定石だが、なぜか一部のブラウザで通用しないので、paddingの上下のみを使って行う。
タグのついた記事 css
CSSでmarginやpaddingを指定した上でbackgroundの色や画像などをその要素の幅までで抑えたい場合
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/
IE6でa要素以外にも疑似要素hoverを適用するには
http://jmblog.jp/archives/88
つまりIE6で透過PNGを表示させる場合と同じようにhtcファイルを別途で読み込む。
わずかとはいえパフォーマンスは低下するはずなので、できればa要素に適用できればそうしたほうがいいね。
IE6でMootoolsのAccordionの動作がおかしいと思ったら
XML宣言を取り払えば他のブラウザと同じように動作した
IE5.5では全く動作していない状態だけどたぶん対応していないからそうしているんだろう、中途半端に動作するよりよっぽどましさ
block要素でありながらwidthを最小幅にするにはinline-block
中央寄せも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行目あたりのコードを参照ということで。(自分用)
firefox2とfirefox3向けのCSS Hack
.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/
cssでblock要素を可変幅にさせるには
display:blockではなくdisplay:inline-blockを使い、widthにはautoを指定する
これにmargin:autoを付ければ中央寄せボタンの完成
