Question

我已经构建了一个上传按钮，其格式看起来像是典型的html按钮，而不是浏览器标准文件上传表单。方法是为锚元素设置样式并在顶部覆盖透明文件输入元素。

这种方法适用于除IE之外的所有浏览器。在IE中，当用户单击上载按钮时，会出现文本光标，就像用户单击了文本输入框一样。用户可以通过双击按钮来触发文件上载对话框。但这不是我们想要的行为或任何人的期望。

我不知道为什么会这样。我已经建立了一个jsfiddle来证明这个问题： http://jsfiddle.net/davelee/yfSmc/3/

Answer 1

在IE11上遇到此错误，使用font-size修复它：0;

Answer 2

我刚刚解决了这个问题。使用IE浏览器，是的，按钮左侧有一个小区域作为文本输入（用于手动输入文件名）。我想出的解决方案是增加输入字段的字体大小。奇怪，我知道，但是通过增加字体大小，你可以增加其输入字段的“浏览...”按钮部分，从而增加可点击区域并推出其上传按钮的文本部分。由于按钮是透明的，所以没有人是明智的：）

Answer 3

设置文件输入元素的宽度和高度可以解决ie8和ie9中的问题。

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

Answer 4

将一个外部div应用于隐藏的流量和宽度，然后输入文件应用一些css，如：font-size，margin-left in negative。

<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上试用

Answer 5

尝试添加css

z-index

你的绝对元素。

最低元素

 z-index:1

最高

z-index:2;

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

IE中的文件上传按钮和奇数文本光标行为

5 个答案: