输入类型= "file" 在 Firefox 中被按钮包围时不起作用

Question

如果我这样做：

<input multiple="multiple" type="file" id="upload_titlebar_logo_live" name="upload_titlebar_logo_live" style="position: absolute; right: 0px; top: 0px; font-family: Arial; font-size: 118px; margin: 0px; padding: 0px; cursor: pointer;" />

一切在所有浏览器上都运行良好。

如果我这样做：

<button class="success expand radius">
    <span id="save_image_titlebar_logo_live">Upload image</span>
    <input multiple="multiple" type="file" id="upload_titlebar_logo_live" name="upload_titlebar_logo_live" style="position: absolute; right: 0px; top: 0px; font-family: Arial; font-size: 118px; margin: 0px; padding: 0px; cursor: pointer; opacity: 0" />
</button>

除了火狐浏览器之外，所有浏览器都能很好地工作。当我单击该按钮时，文件对话框不显示。

有什么想法吗？有解决方法吗？

（我也在使用Foundation和Backbone，如果这是一个问题，但这似乎与这些框架无关）

Answer 1

尝试使用分配了"按钮"类的div 而不是实际的按钮，因为该按钮似乎仅用于样式......

<div class="button success expand radius">
    <span id="save_image_titlebar_logo_live">Upload image</span>
    <input multiple="multiple" type="file" id="upload_titlebar_logo_live" name="upload_titlebar_logo_live" style="position: absolute; right: 0px; top: 0px; font-family: Arial; font-size: 118px; margin: 0px; padding: 0px; cursor: pointer; opacity: 0" />
</div>