1

我创建了一个导航菜单。在 Google Chrome / Firefox 中它看起来非常好。但是在 Internet Explorer 中，按钮的文本在底部？！

那么我该如何解决以下问题？

看看我的意思：

谷歌浏览器： 在此处输入图像描述

火狐浏览器： 在此处输入图像描述

IE浏览器： 在此处输入图像描述

.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>

4

3 回答 3

3

把这个放在你的脑海里。

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

为 IE 创建一个额外的 css 文件并相应地调整您的 IE css。

于 2013-02-07T13:53:14.700 回答
1

您需要重置按钮行高，因为它是从.auto-style5元素继承的。

不幸的是，按钮有点繁琐。我认为 25px 应该是正确的。尝试添加：

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

不过可能需要一些微调。

希望有帮助:)

编辑

或者像这样使它相对：

.auto-style5 button {
    line-height: 1.5;
}
于 2013-02-07T13:51:21.627 回答
0

设置要继承的行高

    line-height: inherit;

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

于 2013-02-07T13:58:44.703 回答