webkit - Webkit 中的行高问题(部分无法点击的链接)

Question

这是 HTML 代码:

<div class="row">
    <span class="item"><a href="#">A</a></span>
    <span class="item"><a href="#">B</a></span>
    <span class="item"><a href="#">C</a></span>
    <span class="under"></span>      
</div>

这是 CSS 代码:

.row {
    line-height:0;}
.item {
    line-height:1.2;}
.row .under {
    display:inline-block;
    width:100%;}

这是带有示例的 jsfiddle 链接:http://jsfiddle.net/SRhK9/12/

问题是在 webkit 中链接是部分不可点击的(从链接的底部到中间)。

如果我删除 span.under 问题将会消失，但我需要这个元素使用 text-align:justify 将 block 与类 .item 对齐，就像这样 http://jsfiddle.net/SRhK9/18/

关于如何解决这个问题的任何想法？

Answer 1

找到答案。如果您将指定 position:relative 到 .item 它将解决问题。这是演示:http://jsfiddle.net/SRhK9/68/