css - 位置为 :absolute 的元素在 Firefox 和 Chrome 中的渲染差异

Question

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

以下是描述问题的图片:

火狐

Chrome

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.