internet-explorer - Internet Explorerを使用してテキストをボタンの中央に配置するには?

Question

ナビゲーションメニューを作成しました。また、Google Chrome / Firefox では非常によく見えます。しかし、Internet Explorer では、ボタンのテキストが一番下にある!?

では、どうすれば次の問題を解決できますか?

私が何を意味するか見てください：

グーグルクローム：

モジラ ファイアフォックス:

インターネットエクスプローラ：

.auto-style2 {
    font-size: 40px;
    text-align: left;
    float:left;
}
.auto-style3 {
    width:1200px;
    height:50px;
    margin: 0px auto;
    text-align: left;
    vertical-align: middle;
}

.auto-style5 {
    text-align: right;
    float:right;
    line-height:50px;
}


<div class="auto-style3">
<div class="auto-style2">
    <strong>SPICYSOFTWARE</strong>
</div>
<div class="auto-style5">
    <button name="Abutton1" style="width: 100px; height: 30px; margin-left: 5px; vertical-align: middle; text-align: center;">MWST</button>
    <button name="Abutton2" style="width: 100px; height: 30px; margin-left: 5px; vertical-align: middle;">News</button>
    <button name="Abutton3" style="width: 100px; height: 30px; margin-left: 5px; vertical-align: middle;">Alle Apps</button>
    <button name="Abutton4" style="width: 100px; height: 30px; margin-left: 5px; vertical-align: middle;">Über uns</button>
    <button name="Abutton5" style="width: 100px; height: 30px; margin-left: 5px; vertical-align: middle;">Changelog</button>
</div>

Answer 1

これを頭に入れてください。

 <!--[if IE]>
    <link rel="stylesheet" type="text/css" href="IE.css" />
 <![endif]-->

IE用の追加のcssファイルを作成し、それに応じてIEcssを調整します。

Answer 2

要素から継承しているため、ボタンの行の高さをリセットする必要があります.auto-style5。

残念ながら、ボタンを使用すると、これは少し面倒です。私は25pxがほぼ正しいはずだと思います。追加してみてください：

.auto-style5 button {
    line-height: 25px;
}

ただし、微調整が必​​要な場合があります。

お役に立てば幸いです:)

編集

または、次のように相対的なものにします。

.auto-style5 button {
    line-height: 1.5;
}

Answer 3

継承する行の高さを設定する

    line-height: inherit;

http://jsbin.com/ovuguw/3/edit