1000本突破
1000本突破

文字の高さの違いをCSSで修正する

ゴウ

すごく基本的な事だったんですが、今日つまづいた箇所なのでメモ。

CSSで作ったボタン

上記の様なボタンを、CSSで作りました。

HTMLのソースは以下。

<div id="button">
  <span><a href="#">ボタン1</a></span>
  <span><a href="#">ボタン2</a></span>
  <span><a href="#">Button3</a></span>
</div>

これのaタグに色を付けて、上下左右にパディング取って、ボーダーを付けるだけのシンプルなやつ。

で、上記のボタンはfirefoxで見た時なんですが、なんの問題もありません。

ところが、IE6で見ると・・・

CSSで作ったボタンIE6

英語のボタンだけ縦幅が大きい・・・。

微妙にずれてる・・・。

原因は、

#button{
	padding:10px 0 30px 0;
	text-align:center;
}
#button span{
	margin:0 15px;
	<strong>vertical-align:middle</strong>
}
#button span a{
	padding:5px 25px;
	background:#f4efe1;
	border:1px solid #888;
	text-decoration:none;
	color:#333333;
}
#button span a:hover{
	padding:5px 25px;
	background:#99b000;
	border:1px solid #666;
	text-decoration:none;
	color:#fff;
}

vertical-align:middle;が必要だったみたいです。

これを入れたらIEでも・・・

CSSで作ったボタン

ちゃんと揃いました。

うーん、 以後気をつけよう。