在Firefox和Chrome中渲染具有position：absolute的元素的差异

Question

显然，嵌套在position:absolute span position:relative {{}}}的元素在Firefox和Chrome中的呈现方式不同。我在span position:relative中有两个这样的元素需要覆盖，问题是我无法在Chrome和Firefox中叠加它们。

以下是描述此问题的图片：

火狐

铬

CSS：

.csv-upload-btn{
    position:relative;
    margin: 0 0 10px 4px;
    height:20px;
    width: 54px;

    #id_uploaded_file {
        position:absolute;
        z-index:2; 
        opacity:0;
        height: 16px;
        width: 47px;
    }

    .upload-btn {
        background: url(images/btn-upload-bg.png) repeat-x 0 0;
        position: absolute;
        padding: 0 5px;
        border-radius: 3px;
        color: #fff;
        width:47px;
    }
}

编辑：我知道这不是很多，但不幸的是，这是我可以合法分享的。任何想法和建议将不胜感激。如果/我什么时候能找到我的伴侣，我会提供更多细节

Answer 1

将你的#id_uploaded_file设置为top：0，left：0。它是绝对定位但你没有指定位置。

 #id_uploaded_file {
        position:absolute;
        top: 0;
        left: 0;
        z-index:2; 
        opacity:0;
        height: 16px;
        width: 47px;
    }

HTH。