带有文本的 IE9 元素 + 浮动右元素

Question

我对旁边有一个右浮动图标的链接元素有疑问。在 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;
}

它应该是什么样子（绿色是图标的开头）

IE9

有什么想法吗？

Answer 1

看起来像 float 问题。

尝试将 Login 文本包裹在 div 和 float 中，将其包裹到 left。

Answer 2

我认为你可以使用如下所示的东西。

<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;
}