文件的上传按钮，然后在IE奇文本光标行为(File upload button and odd te

我已经建立了按照以下格式看起来像典型的HTML按钮，而不是浏览器标准的文件上传表单的上传按钮。的方法是样式的锚定元件和顶部覆盖一个透明的文件输入元件。

这种方法在所有浏览器IE，但能正常工作。在IE中，当用户点击上传按钮会显示一个文本光标，就好像用户已经点击了一个文本输入框。用户可以通过双击该按钮触发文件上传对话框。但是，这不是我们想要的行为或任何人的期望。

我不知所措，为什么发生这种情况。我已经设置了的jsfiddle这里展示的问题： http://jsfiddle.net/davelee/yfSmc/3/

Answer 1:

满足IE11这个bug，与字体大小修正：0;

Answer 2:

我刚工作就这一确切的问题。与IE，是的，有关于充当文本输入（手动输入的文件名）的按钮的左边的小区域。我想出的解决方案是增加输入字段的字体大小。奇怪了，我知道，但通过增加字体大小，可以增加他们的输入字段的“浏览”按钮部分，并因此增加可点击区域，并推出自己的上传按钮的文字部分。由于该按钮是透明的，无论如何，没有人是明智的:)

Answer 3:

设置文件输入元素的宽度和高度，修复了双方IE8和IE9的问题。

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

Answer 4:

采取外层div于该输入文件流隐藏和宽度施加到它，那么与输入文件应用一些CSS像：字体大小，利润率左负。

<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