3

为什么以下小提琴仅在 Firefox 中不能正常工作（文本消失）？

我在下面的小提琴中想要做的是，

我不喜欢浏览器的文件上传控件，我正在创建 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/

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

4

2 回答 2

1

关于位置：相对和位置：绝对：

 position:relative;

将您的元素保持在页面流中，您甚至可以在其上指定浮动。它起源于它的父母。

 position:absolute;

从页面流中删除您的元素。它在 body 元素中取其原点，除非它嵌套在 position:relative element (your example) 中，否则 position:absolute 元素在其父元素中取其原点。

于 2012-11-26T12:36:37.437 回答
1

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

当某物被聚焦时，浏览器会尝试将其滚动到视图中。因此，在这种情况下，<div class="file-label">无论滚动多远，它都需要滚动才能将文件输入显示在视图中，这会将文本滚动到视图之外。

于 2012-11-27T02:37:42.213 回答