html - IE8 float 问题再次出现

Question

上下文

在我的页眉中，我想将我的小登录菜单“登录”和“帮助”放在页面右侧，与左侧的 Logo (红色矩形)高度相同。

问题

布局不适用于 IE8。

它在 Chrome 上按预期工作:

但它在 IE8 上给出了这个:

或者这个:

代码

HTML

<header class="header">
    <div class="Login">
        <a id="LB_GotoLogin" tabindex="30" href="javascript:__doPostBack('ctl00$MainContent$LB_GotoLogin','')">LOGIN</a>
        <br><br>
        <a id="LB_Help" tabindex="30" href="javascript:__doPostBack('ctl00$MainContent$LB_Help','')">Help</a>
    </div>
    <a href="/Default.aspx" style="text-decoration: none; display: inline-block; *display: inline; *zoom: 1;">
        <img src="Logo.jpg" style="height:64px;border: 0;">
    </a>
</header>

CSS

.header
{
    padding: 18px 50px;
    margin: 0px auto;
    text-align: left;
    line-height: normal;
    height: 64px;
}

.login
{
    float: right;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    width: 100px;
}

我尝试了什么

1. 我尝试将右浮动元素(登录名)放置在 Logo 之前，它给出了我包含的第一个 IE8 图像而不是第二个。 (如所述 Here )
2. 我在多个位置为 float 元素设置了宽度。
3. 每个容器都是<div>秒。如前所述 Here , IE8 不识别其他标签。
4. 尝试制作所有东西 inline-blocks使用 IE8 hack (`*dispay: inline; *zoom: 1;)

没有任何效果。

问题

如何使我的布局适用于 IE8？ (我错过了什么？)

Answer 1

正如 Niet the Dark Absol 指出的那样，

Class "login" and class "Login" are two different classes. Some browsers may be tolerant of this (but they shouldn't be), IE8 is not.

Internet Explorer 8 区分大小写，而其他浏览器不区分大小写。

使用完全相同的类名可以解决问题。