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问题就会消失，但我需要这个元素来将块与类对齐。item使用text-align:justify，如下所示http://jsfiddle.net/SRhK9/18/

关于如何解决这个问题，有什么想法吗？

Answer 1

找到了答案。如果您将指定位置：相对于.item，它将解决问题。以下是演示：http://jsfiddle.net/SRhK9/68/