同じ行内にラジオボタンもしくはちっちゃな画像とか（つまり置換インライン要素）とテキストが混じっている場合、テキストの表示される縦方向の位置がブラウザによって結構違っていたりして、困りませんか？これを調整するには普通、ラジオボタンにvertical-alignプロパティを指定しますよね。baseline（規定値）とか、middleとか、bottomとか。
しかしvertical-alignプロパティで同じ値を指定しても、やっぱりブラウザによって微妙に位置がズレてしまうし、ピクセル単位での細かい指定ができません。これをborderで強引にやってみました。
置換インライン要素に縦方向のborderを設定してやることによって、borderの太さ分だけ縦位置をズラしてあげることができる……はずです。もちろんvertical-alignも併用するといいでしょう。
border-colorは背景色と同じにできるのがベストですが、背景画像があったりするとアウトなのでtransparentにします。
以下、実際にやってみたサンプルへのリンクです。
- 置換インライン要素の縦方向の位置をborderで調節してみたサンプル
– XHTML1.0 Strict(XML宣言有り) - 置換インライン要素の縦方向の位置をborderで調節してみたサンプル
– XHTML1.0 Strict(XML宣言無し)
サンプルを見た方は既にお気づきかもしれませんが、残念ながらすごい微妙です。私がサンプルを表示確認をしたブラウザはIE6、IE7、Firefox2、Opera9、Safari3です。
