CSS:ボタンとボタン風リンクの高さが合わない問題に終止符!

長年悩んでたやつなんですが、ボタンとボタン風リンクの高さが合わないやつ。
Chromeで開発してて高さを合わせてると、違うブラウザだとずれてる場合があります。今回も普通にやっていたら、ボタンの大きさが違うのをなんとかしてくださいって言われて、合ってるのに何言ってるんだ?と思っていたら思い切り違ってました…。

これはあれか?CSSをハックせにゃならんのか?と思ってcss ieでググっていたのですが、IE11でもずれるのはなんか変だしそろそろ解決策あるだろーと思って色々調べていたら、あった!!

cssで、aタグのdisplayをinline-blockにして、line-height: normalにするとよかった。ただ、全体的にline-heightを変えてないのであれば、これは必要ないんですが、だいたいのサイトはline-height変えてますよね…。
以下のresultとcssのタブを見てもらえたらわかりやすい。

ボタンは改行されることがないので(多分)、line-heightの変更の影響を受けていないのですが、aタグは本来はただの文字列中に登場するものなので、思い切りline-heightの影響を受けます。これを、ボタン風class内でnormalに戻してやる必要があったと…。

これが解決したときにはすげー感動しました。
ChromeとIE9,10,11で確認した限りだとこれでいけました。


タグ CSS | パーマリンク.

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です