IE8浮动问题再次出现

Question

上下文

在我的标题中，我想将我的小登录菜单“LOGIN”和“Help”放在页面右侧，与左侧徽标（红色矩形）的高度相同。

问题

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. 我尝试在徽标之前放置浮动右侧元素（登录），它给出了我包含的第一个IE8图像而不是第二个。 （如陈述Here）
2. 我在多处放置了浮动元素的宽度。
3. 每个容器都是<div>个。如上所述Here，IE8无法识别其他标签。
4. 尝试用IE8 hack制作所有inline-blocks（`* dispay：inline; * zoom：1;）

没有任何效果。

问题

如何让我的布局适用于IE8？ （我错过了什么？）

Answer 1

作为 Niet the Dark Absol 注意到，

  

Class＆＃34;登录＆＃34;和班级＆＃34;登录＆＃34;是两个不同的类。有些浏览器可能会容忍这种情况（但它们不应该），IE8则不然。

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

使用相同的确切类名来解决问题。