文字の高さの違いを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タグに色を付けて、上下左右にパディング取って、ボーダーを付けるだけのシンプルなやつ。
で、上記のボタンはgoogle chromeで見た時なんですが、なんの問題もありません。
ところが、IEで見ると英語のボタンだけ縦幅が大きい・・・。

微妙にずれてる・・・。
原因は、
#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でも・・・

ちゃんと揃いました。
うーん、 以後気をつけよう。
         
                         
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
              Webサイト制作の実績・料金を見る