Question

为什么以下小提琴只能在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键。 “新文件”文本消失。但是您仍然可以通过单击蓝色按钮来调用浏览窗口。为什么文字消失了？

Answer 1

关于职位：亲属和职位：绝对：

 position:relative;

将您的元素保留在页面流中，您甚至可以在其上指定浮点数。它的起源是它的父母。

 position:absolute;

从页面流中删除元素。它取自body元素，除非它嵌套在position：relative元素（你的例子）中，然后position：absolute元素在其父元素中占据原点。

Answer 2

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

当某些内容聚焦时，浏览器会尝试将其滚动到视图中。因此，在这种情况下，<div class="file-label">会滚动，但是需要滚动才能将文件输入带入视图，从而将文本滚动到视图之外。

为什么绝对和相对定位在Firefox中无法正常工作？

标记和CSS

2 个答案: