3

次のフィドルがFirefoxでのみ正しく機能しない（テキストが消える）のはなぜですか？

以下のフィドルで私がやろうとしているのは、

私はブラウザのファイルアップロードコントロールが好きではなく、ボタンのように見えるようにCSSを作成しています。ファイルアップロードコントロールはdivで囲まれ、不透明度プロパティで非表示になっています。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 について:

 position:relative;

要素をページの流れに保ちます。フロートを指定することもできます。その起源は親にあります。

 position:absolute;

ページのフローから要素を削除します。position:relative element (あなたの例) にネストされていない限り、 body 要素でその起源を取り、 position:absolute 要素はその親でその起源を取ります。

于 2012-11-26T12:36:37.437 に答える
1

タブを押すと、ブラウザーはファイル入力にフォーカスを置きます。これは、タブ オーダーの次の項目であるためです。

何かがフォーカスされると、ブラウザーはそれをスクロールして表示しようとします。したがって、この場合、<div class="file-label">はスクロールされますが、ファイル入力を表示するにはスクロールする必要があり、テキストがスクロールされて表示されなくなります。

于 2012-11-27T02:37:42.213 に答える