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将此元素与类.item对齐，如此http://jsfiddle.net/SRhK9/18/

有关如何解决此问题的任何想法？

Answer 1

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