html - 行内 block 元素具有不同的垂直对齐方式

Question

我需要在链接后获得带有图标的链接。

例如:

Link [icon]

我想要的行高是 30px。所以，我有这样一个标记:

<div class="phone-support">
   <a href="#">We'll call you</a><i class="icon"></i>
</div>

.phone-support a {
   display       : inline-block;
   line-height   : 30px;
   padding-right : 5px;
   height        : 30px;
}

.phone-support i.icon {
   display       : inline-block;
   height        : 30px;
   width         : 30px;
   background    : url('/path/to/sprite.png') -10px -10px;
}

我认为它应该可以工作，但是 .phone-support 的高度变成了 41px，但为什么？并且元素没有垂直对齐。他们一个接一个地简单停留，为什么会这样？

附言我的浏览器是Chromium 18，别关注没有ie-inline-block-fix等，CSS代码简化就是为了指出问题。

Answer 1

jsBin demo

只需输入您的 <i>在<a>里面.好处？您的图像将是可链接的。

<div class="phone-support">
   <a href="#">We'll call you  <i class="icon"></i> </a>
</div>

比设置一个vertical-align:top;将您的图像设置在 <a> 的顶部 parent 。

.phone-support i.icon {
     display       : inline-block;
     vertical-align: top;
     height        : 30px;
     width         : 30px;
     background    : url(your url here);
     margin-left   : 10px;  /*add some space*/
}