css - 为什么绝对和相对定位在 Firefox 中不能按预期工作？

Question

为什么以下 fiddle 只能在 firefox 中无法正常工作(文本消失)？

我想在下面的 fiddle 中做的是，

我不喜欢浏览器的文件上传控件，我正在创建 CSS 使其看起来像一个按钮。文件上传控件包含在一个 div 中，并通过 opacity 属性隐藏。将 CSS 添加到外部 div，使其看起来像一个按钮。

标记和 CSS

HTML:

<button id="Ctrl" class="button" type="button">Query</button>
<div id="file" class="file-label appletButton">
New File
<input id="FileInput" class="file-input" type="file" name="fileinput" multiple></div>

CSS

.file-input {
    width: 100%;
    position: absolute;
    box-sizing: border-box;
    top: 0;
    right: 0;
    margin: 0;
    border: solid transparent;
    border-width: 0 0 100px 200px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter:'progid:DXImageTransform.Microsoft.Alpha(opacity=0)';
    -moz-transform: translate(-300px, 0) scale(4);
    -o-transform: 'translate(250px, -50px) scale(1)';
}
.file-label {
    padding: 5px;
    position: relative;
    display: inline-block;
    overflow: hidden;
}
.appletButton {
    background: linear-gradient(to bottom, #8ABAFE 0%, #5788C7 100%) repeat scroll 0 0 transparent;
    border: 1px solid #31537F;
    color: #F5F5F5;
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.2);
}

---

http://jsfiddle.net/6ZuPM/7/

在上面的 fiddle 中，首先点击“查询”按钮。然后按 TAB 键。 “新文件”文本消失。但是您仍然可以通过单击蓝色按钮来调用浏览窗口。为什么文本消失了？

Answer 1

当您按下 Tab 键时，浏览器会将焦点放在文件输入上，因为这是 Tab 键顺序中的下一个内容。

当某物获得焦点时，浏览器会尝试将其滚动到 View 中。所以在这种情况下 <div class="file-label">被滚动，但是需要滚动多远才能将文件输入显示在 View 中，这会将文本滚动到 View 之外。