在 Firefox 和 Chrome 中为具有 position:absolute 的元素呈现差异答案

【问题标题】：Rendering differences in Firefox and Chrome for elements with position:absolute在 Firefox 和 Chrome 中为具有 position:absolute 的元素呈现差异
【发布时间】：2013-06-20 20:58:49
【问题描述】：

显然，带有position:absolute 的元素嵌套在带有position:relative 的span 中的元素在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;
    }
}

编辑：我知道这没什么好说的，但不幸的是，这是我可以合法分享的全部内容。任何想法和建议将不胜感激。如果/何时可以联系到我的伴侣，我会提供更多详细信息

【问题讨论】：

你有这个 jsfiddle 吗？
您不能设置内联元素的宽度或高度。您是否尝试将.csv-upload-btn 设置为display: inline-block？
在那个按钮里扔一些display:block;s。
@cimmanon 它不是绝对定位的。相对jsfiddle.net/2dRwf
@JawwadZakaria 认为您所看到的内容应该可以在最小的通用 html+css 中重现。这样做通常可以帮助您在减少时发现自己做错了什么，这是自我发现问题答案的最有效方法。因此，即使您不能，也请尝试，保留所有内容的通用文本。

标签： css google-chrome firefox cross-browser

【解决方案1】：

将您的#id_uploaded_file 设置为顶部：0，左侧：0。它是绝对定位的，但您尚未指定位置。

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

HTH。

【讨论】：