Css Firefox和Chrome中位置为绝对的元素的渲染差异

显然，在Firefox和Chrome中，嵌套在

span

中的

position:absolute

元素在

position:relative

中呈现出不同的效果。我在

span

中有两个这样的元素，它们的

位置是：relative

，我需要覆盖它们，问题是我不能在Chrome和Firefox中都覆盖它们

以下是描述问题的图片：

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;
    }
}

编辑：我知道这不是很多事情，但不幸的是，这是我可以合法分享的全部。如有任何意见和建议，将不胜感激。如果/当我能找到我的合作伙伴时，我将提供更多详细信息

将你的#id_上传的_文件设置为顶部：0，左侧：0。它已完全定位，但您尚未指定位置

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

---

HTH.

您有用于此的JSFIDLE吗？您不能设置内联元素的宽度或高度。您是否尝试将

.csv上载btn

设置为

显示：内联块

？抛出一些

显示：块在那个按钮中。@cimmanon它不是绝对定位的。Real@ @ JawwadZakaria认为，你所看到的东西应该是一个最小的、通用的HTML+CSS的可重复性。这样做通常有助于你发现自己做错了什么，同时减少风险，这是自我发现问题答案的最有效方法。因此，即使你不能，无论如何也要尝试，这样可以保留所有内容的通用文本。