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

Question

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

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

我不知道为什么会发生这种情况.我已经设置了一个jsfiddle来证明这个问题:http: //jsfiddle.net/davelee/yfSmc/3/

Answer 1

在IE11上遇到这个bug,用font-size修复它:0;

Answer 2

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

Answer 3

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

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