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

Question

I have an issue with an link-element that has a right-floated icon next to it. In FF/Chrome everything looks good, but in IE9 the text is at the bottom of the container, not vertically aligned.

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

How it's supposed to look (the green is the beginning of the icon)

IE9

Any ideas?

Answer 1

Looks like a float issue.

Try wrapping the Login text inside a div and float that to the left .

Answer 2

I think you can use someling like below.

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