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

时间:2013-02-28 11:52:57

标签: html css internet-explorer internet-explorer-9

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

应该如何看(绿色是图标的开头) enter image description here

IE9 enter image description here

有什么想法吗?

2 个答案:

答案 0 :(得分:0)

看起来像float问题。

尝试将Login文本包裹在divfloatleft

答案 1 :(得分:0)

我认为你可以像下面这样使用。

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