按钮内的文件输入字段在Firefox中不起作用

Question

我想input在我的页面上有一个样式文件字段,因此将其放在一个button完全覆盖的文件字段中,并通过将其opactiy设置为0使其不可见.

这种方法在最新版本的Chrome中运行良好,但Firefox(和IE)在单击按钮时不会打开文件对话框:

http://jsfiddle.net/ch8xxvez/3/

<button style="width: 100px; height: 100px; position: relative;">Upload button
    <input type="file" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0;"></input>
</button>

如果我button用a 替换元素,相同的代码可以工作,div但我真的想知道是否有一种方法可以使用button最新版本的IE(> = 10),FF,Chrome和Edge中的标记.

Answer 1

HTML中的按钮元素内不允许输入元素.

编写有效的HTML而不是依赖于一致的错误恢复.

制作按钮并输入同级元素,然后将它们放在容器(例如div)中.