当用按钮包围时,输入类型="文件"在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>

除了 Firefox 之外,所有浏览器都能很好地工作.单击该按钮时,文件对话框不会显示.

有任何想法吗？有解决方法吗？

(我也在使用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>