Html 带文本的IE9元素+；浮动右元素

我有一个链接元素的问题，它旁边有一个右浮动图标。在FF/Chrome中，一切看起来都不错，但在IE9中，文本位于容器底部，而不是垂直对齐

<a href="#" role="button" data-toggle="modal" class="login">
   Login <span class="icon-login"></span>
</a>

.login {
   line-height: 40px;
   height: 40px;
   margin-top: 0;
   position: absolute;
   top: 0;
   right: 0;
   float: right;
}

.icon-login {
   display: inline-block;
   line-height: 40px;
   height: 40px;
   width: 40px;
   float: right;
   padding: 0;
   margin: 0 0 0 20px;
}

.登录{
线高：40px；
高度：40px；
边际上限：0；
位置：绝对位置；
排名：0；
右：0；
浮动：对；
}
.图标登录{
显示：内联块；
线高：40px；
高度：40px；
宽度：40px；
浮动：对；
填充：0；
利润率：0.20px；
}

它的外观（绿色是图标的开头）

IE9

---

有什么想法吗？

看起来像是一个

浮动问题

尝试将
登录
文本包装在
div
和
float
中，然后放到
左侧
我想你可以使用下面的方法

<a href="#" role="button" data-toggle="modal" class="login">
   Login 
</a>

.login {
   line-height: 40px;
   height: 40px;
   margin-top: 0;
   position: absolute;
   top: 0;
   right: 0;
   float: right;
   background: url(icon-login.png) right center;
   padding-right:40px;
}


.登录{
线高：40px；
高度：40px；
边际上限：0；
位置：绝对位置；
排名：0；
右：0；
浮动：对；
背景：url（icon login.png）右中心；
右边填充：40px；
}
是的，这会管用，但我更喜欢在整个网站上使用相同的图标标记。谢谢你！是的，我希望避免添加额外的标记，但似乎这是唯一的解决方案。谢谢