Webkit中的行高问题部分不可点击的链接

问题描述

|| 这是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/ 有关如何解决此问题的任何想法？     

解决方法

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