Html 我隐藏的文件输入字段在左侧神秘地扩展

我通过以下css隐藏了我的文件输入按钮

.picture-link {
    height: 2px;
    width: 2px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}
.picture-link > input{
    position:absolute;
    top: 0;
    right: 0;
    z-index: 99;
    opacity: 0;
    -moz-opacity: 0;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0)
}

我的html

<span class="picture-link update-box-icon-link"><i class="fa fa-camera"></i>
                                              <input type="file" name="upd-img-file" class="upd-img-file" data-url="/post/image/upload" multiple/>
                                           </span>

我看到按钮不知何故延伸到了如图所示的神秘部分。它只发生在左侧。 输入字段隐藏在摄像机图标下。有线索吗

---

使用内联元素作为其他元素的父元素总是会带来一些神秘的事情，为什么要这样做？=添加到css图片链接{…display:block；或内联块或使用另一个元素，然后span感谢这些帮助。