html - 从锚点中删除多余的线

Question

我想从下面的底部和右侧删除这些额外的间距：

结果在 IE 和 chrome 上是不同的，chrome 都有间距，IE 底部没有间距。

你能指导我做错了什么吗？也许与“显示”CSS有关？

jsfiddle

屏幕截图 Chrome：http: //i.imgur.com/S8xtZBm.png

截图 IE：http: //i.imgur.com/Uoqfo2R.png

代码：

<footer>
<a class="tb-btn-s" style="color: #fff; background-color: #0064a9" href="/services/">service</a>
<a class="tb-btn-s" style="color: #fff; background-color: #0064a9" href="/services/">service</a>
<a class="tb-btn-s" style="color: #fff; background-color: #0064a9" href="/services/">service</a>
<a class="tb-btn-s" style="color: #fff; background-color: #0064a9" href="/services/">service</a>
<a class="tb-btn-s" style="color: #fff; background-color: #0064a9" href="/services/">service</a>
<a class="tb-btn-s" style="color: #fff; background-color: #0064a9" href="/services/">service</a>
<a class="tb-btn-s" style="color: #fff; background-color: #0064a9" href="/services/">service</a>
<a class="tb-btn-s" style="color: #fff; background-color: #0064a9" href="/services/">service</a>
<a class="tb-btn-s" style="color: #fff; background-color: #0064a9" href="/services/">service</a>
<a class="tb-btn-s" style="color: #fff; background-color: #0064a9" href="/services/">service</a>
    </footer>

CSS：

.tb-btn-s {
    zoom: 1;
    z-index: 1;
    font-size: 14px;
    line-height: 5px;
    min-width: 42px;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: inherit;
    position: relative;
    display: inline-block;
    overflow: visible;
    margin: 0;
    padding: 8px 10px;
    cursor: pointer;
    outline: 0;
    border: 0;
    text-align: left;
    padding-right: 30px;
    min-width: 60px;
}
footer
{
    background-color: red;
}

谢谢 ！

Answer 1

要删除链接下方的空格，请添加vertical-align:top;到.tb-btn-s类。要删除链接旁边的空格，请删除代码中的空格。

jsFiddle 示例

Answer 2

只需添加float:left;.tb-btn-s

jsFiddle 文件

Answer 3

侧边距是因为 inline-block 底部边距是因为 lineheight

您可以将此添加到父级

word-spacing:-4px;

并将其重置为“a”以从内联块中删除边距

word-spacing:0;

同时删除你的 line-height

http://jsfiddle.net/nyaFz/5/