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テキストを a 内にラップし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;
}