置換インライン要素の縦方向の位置をborderで調整してみる

同じ行内にラジオボタンもしくはちっちゃな画像とか（つまり置換インライン要素）とテキストが混じっている場合、テキストの表示される縦方向の位置がブラウザによって結構違っていたりして、困りませんか？これを調整するには普通、ラジオボタンにvertical-alignプロパティを指定しますよね。baseline（規定値）とか、middleとか、bottomとか。

しかしvertical-alignプロパティで同じ値を指定しても、やっぱりブラウザによって微妙に位置がズレてしまうし、ピクセル単位での細かい指定ができません。これをborderで強引にやってみました。

置換インライン要素に縦方向のborderを設定してやることによって、borderの太さ分だけ縦位置をズラしてあげることができる……はずです。もちろんvertical-alignも併用するといいでしょう。
border-colorは背景色と同じにできるのがベストですが、背景画像があったりするとアウトなのでtransparentにします。

以下、実際にやってみたサンプルへのリンクです。

サンプルを見た方は既にお気づきかもしれませんが、残念ながらすごい微妙です。私がサンプルを表示確認をしたブラウザはIE6、IE7、Firefox2、Opera9、Safari3です。

まず、サンプルは (1)チェックボックスと (2)ラジオボタンと (3)ビュレットの画像の3種類をテキストと同じ行に並べて、それぞれにスタイルを適用しています。適用しているプロパティはサンプルに表示の通りで、

vertical-align:baseline;
vertical-align:baseline; padding-bottom:2px solid transparent;
vertical-align:baseline; padding-bottom:2px solid transparent; padding-bottom:10px;

のそれぞれ3種類となっています。padding-bottom:10px;と値が大きいのは、効いているのか効いていないのかが一目で分かるようにするためです。

このスクリーンショットはXML宣言有りのXHTML文書を各ブラウザで表示したものです。IE6は過去互換モードになります。ブラウザごとに表示がかなり違っているのが分かります…。

まず、IE6がborder-color:transparent;に対応していないことが分かります。またビュレット画像は透過pngなので当然のごとくこれも透けてないですね。
それからIE6・IE7・Opera9ではチェックボックスやラジオボタンのデフォルトのスタイル（IEのはWindowsXPの"テーマ"）が、borderを適用したことによってリセットされてしまっています。結構カッコワルイです……。
しかしこの3ブラウザにはその代わり、borderによる縦方向の位置調整の効果は出ているようです。
Opera9にだけ、チェックボックスとラジオボタンへのpadding指定で、変化が現れています。
Firefox2とSafari3はチェックボックスとラジオボタンへのborder指定を華麗に無視。当然paddingも無視です。
一方画像の場合、IE6が過去互換モードなのでpaddingを無視している以外、正常に指定が反映されています。

以上のことから結論を考察すると、

チェックボックスとラジオボタン: border指定を解釈するブラウザ（IE6・IE7・Opera9）はブラウザ独自のテーマをリセットされてしまい、かっこ悪くなる。; border指定を解釈しないブラウザ（Firefox2・Safari3）はそもそも表示に変化が現れない。; paddingを解釈するのはOpera9のみ。; よって結局、vertical-alignのみで頑張るのが良さそう。
画像: IE6以外はborderでもpaddingでも縦位置を調整できる。; IE6はborder-color:transparent;をサポートしてない＆（過去互換モードでは）paddingを解釈しないので、border-colorを背景色と同じにすれば調整に使えないことはない。だけど背景画像が敷いてあると、この方法もアウト。

と、いったところでしょうか。
ちょっとした調整に使う裏技としてご紹介できるかと思ったのですが、ちゃんと検証してみるとかなり微妙な結果となってしまいました。各ブラウザの挙動をちゃんと把握していれば、使えないことはない、というところでしょうか。

Leave a Reply