8

ブラウザの標準的なファイル アップロード フォームではなく、典型的な html ボタンのように見えるようにフォーマットされたアップロード ボタンを作成しました。アプローチは、アンカー要素のスタイルを設定し、その上に透明なファイル入力要素をオーバーレイすることでした。

このアプローチは、IE 以外のすべてのブラウザーで正常に機能します。IE では、ユーザーがアップロード ボタンをクリックすると、ユーザーがテキスト入力ボックスをクリックしたかのようにテキスト カーソルが表示されます。ユーザーは、ボタンをダブルクリックして、ファイル アップロード ダイアログをトリガーできます。しかし、これは私たちが望んでいる、または誰もが期待している動作ではありません。

なぜこれが起こっているのか、私は途方に暮れています。ここで問題を示すjsfiddleをセットアップしました： http://jsfiddle.net/davelee/yfSmc/3/

4

5 に答える 5

11

IE11 でこのバグに対応し、font-size: 0; で修正してください。

于 2016-04-18T12:24:22.533 に答える
6

私はまさにこの問題に取り組んできました。IE では、はい、ボタンの左側にテキスト入力として機能する小さな領域があります (ファイル名を手動で入力するため)。私が考え出した解決策は、入力フィールドのフォントサイズを大きくすることでした。奇妙なことですが、フォントサイズを大きくすると、入力フィールドの「参照...」ボタン部分が大きくなるため、クリック可能な領域が大きくなり、アップロードボタンのテキスト部分が押し出されます。とにかくボタンは透明なので、誰も賢明ではありません:)

于 2013-04-05T20:01:12.097 に答える
1

ファイル入力要素の幅と高さを設定すると、ie8 と ie9 の両方で問題が修正されます。

http://jsfiddle.net/davelee/yfSmc/4/

于 2012-05-18T16:05:42.187 に答える
0

cssを追加してみてください

Z インデックス

あなたの絶対的な要素に。

最低の要素

 z-index:1

最高

z-index:2;

コンテナー要素に z-index を設定します。

于 2012-05-17T22:30:18.620 に答える