IE需要双击自定义按钮
我有一个潜水的脚本：
HTML：
File is uploaded! JavaScript（JQuery 2）：
$(document).ready(function () { $("input").on("change", function () { $("div#notice").fadeIn(); //$("form").submit(); //If you want it to submit on your site uncomment this }); });
CSS：
div#wrapper { background-color: #ccc; position: absolute; width: 300px; height: 200px; } div#wrapper > form > input { color: rgba(0, 0, 0, 0); zoom: 1; filter: alpha(opacity=0); opacity: 0; color: rgba(0, 0, 0, 0); } div#container { width: 200px; height: 20px; overflow: hidden; } div#button, input { position: absolute; top: 0px; left: 0px; cursor: pointer; } div#button { z-index: 1; background-color: #AAA; } input { z-index: 2; background-color: rgba(0, 0, 0, 0); opacity: 0; alpha: filter(opacity=0); font-size: 25px; color: rgba(0,0,0,0); filter: alpha(opacity=0); zoom: 1; } div#notice { background-color: green; display: none; position: absolute; bottom: 0px; left: 0px; }
注意：在使用模糊隐藏IE中的闪烁图标之前，存在此问题。
在Chrome和Firefox中，按钮只需单击一下即可。 在IE 10中，它需要双击，我不想要。 我试图想办法让它单击一下。
到目前为止我唯一尝试过的是输入上的.render("click") ，但是没有用。
JSFiddle： http ： //jsfiddle.net/plowdawg/mk77W/
我有同样的问题，发现了不同的方法。 我刚刚使用font-size制作了那个按钮。 那么人根本无法点击文字部分。
和css：
.divFileUpload { background-color: #F60; border-radius: 5px; height: 50px; margin-left: auto; margin-right: auto; overflow: hidden; position: relative; width: 50% } .fileUpload { cursor: pointer; font-size: 10000px; /* This is the main part. */ height: 100%; opacity: 0; position: absolute; right: 0; top: 0; width: 100% }
跟进SDLion说的话……
这可能就是你所看到的 
但实际上有一个文件上传控件已经变得透明。 
单击浏览按钮只需单击一下即可打开文件上载对话框。 在IE中如果要查看文件上载对话框，则必须双击其左侧的文本框。
增加文件输入的字体大小以填充按钮图像 
虽然@ bastos.sergio在文本部分发生的事情是正确的，但是如果您习惯使用JavaScript，有一种方法可以解决这个问题。
你会需要：
- 包装器div标签
- 内部开发标记
- 某种forms的输入
- JQuery（在2.1上测试）
脚步：
- 创建“包装器”div
- 创建一个内部“按钮”div
- 将表单元素放在内部“按钮”div下面
- 将“包装器”和“内部”div设置为相同的大小
- 设置
overflow:hidden在包装器上 - 为“内部”div创建一个JQuery脚本，设置on click函数
- 在“内部”函数中单击函数调用输入上的
.click()
似乎在IE 10中为我工作。
$(document).ready( function() { $("#open_dialog").on("click",function() { $("input").click(); }); $("input").on("change",function() { alert($("input")); $("#notice").html("uploading"); }); });
#open_dialog { position: relative; width: 200px; height: 50px; color: white; font-family: "Arial"; font-size: 14pt; text-align: center; top: 25px; margin-top: -.5em; z-index: 1; } #wrapper { width: 200px; height: 50px; overflow: hidden; cursor: pointer; border-radius: 10px; background: green; z-index: 0; } input { margin-top: 100px; }
Click Me Nothing to upload
双击发生在文件上传的文本部分，如@TravisPessetto所述。
由于无法隐藏/删除文件输入控件中的文本部分，我建议您在文件输入上放置一个常规按钮。
有关详细信息， 请参见此处
我发现了另一个更简单的解决方案，只是触发mousedown上的事件“click”仅用于此元素：
$("input").mousedown(function() { $(this).trigger('click'); })
为了避免其他浏览器出现问题，请将此解决方案仅应用于IE：
if ($.browser.msie && parseInt($.browser.version, 10) > 8) { $("#your_file_input").mousedown(function(event) { if (event.which == 1) { $(this).trigger('click'); } }) }
这是你的jfiddle修改，在IE 9-10上检查： http ： //jsfiddle.net/7Lq3k/
编辑：修改示例以限制仅左键单击的事件处理（请参阅： 如何区分左键和右键单击jQuery以获取详细信息）
我混合使用各种解决方案来获得适合我的解决方案（在每个浏览器上）。 它是使用LESS嵌套编写的。
HTML
Select image
没有CSS
/* * Input "file" type Styling * Based on http://goo.gl/07sCBA * and http://stackoverflow.com/a/21092148/1252920 */ .input-file { position: relative; overflow: hidden; margin: 10px; input[type="file"] { opacity: 0; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: 0; padding: 0; cursor: pointer; width: 100%; height: 100%; font-size: 10000px; } // For Chrome input[type=file]::-webkit-file-upload-button { cursor: pointer; } }