我遇到一个链接元素的问题,它旁边有一个右浮动图标。在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
有什么想法吗?
答案 0 :(得分:0)
看起来像float
问题。
尝试将Login
文本包裹在div
和float
内left
。
答案 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;
}