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 回答
1

将外部 div 应用于该输入文件，将其应用于隐藏的流和宽度，然后对输入文件应用一些 css，例如：font-size，margin-left 为负数。

<div class="outerWrap">
   <input type="file" id="fileUpload"/>
</div>

CSS将是：

.outerWrap {
  width: 200px;
  height: 50px;
  overflow: hidden;
}
#fileUpload {
  width: 210px;
  height: 50px;
  margin-left: -10px;
  font-size: 70px;
}

根据您的要求调整宽度和左边距。

参考得到这个链接： http: //jsfiddle.net/TrdJ8/ 并在 IE-9 上试用

于 2014-06-02T13:57:50.873 回答
0

尝试添加css

z-index

到你的绝对元素。

最低元素

 z-index:1

最高

z-index:2;

并在容器元素上设置 z-index。

于 2012-05-17T22:30:18.620 回答