html - 带有文本的 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尝试将文本包装在 adiv和floatthat 到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;
}