Safari 显示：无答案

【问题标题】：Safari display: noneSafari 显示：无
【发布时间】：2014-10-30 17:36:56
【问题描述】：

如果我使用 css 属性 display: none 隐藏它，Safari 就不会打开元素！但它适用于所有其他浏览器。

这是我的html：

<div id="f" class="btn">Select Image</div>
<input type="file" id="file" style="display:none;" name='athletes_imageid'  value="" />

现在在我的 jquery 中，我想通过单击“选择图像”<div> 打开id="file"：

$("#f").click(function() {
    $("#file").click();
});

【问题讨论】：

#f 有身高吗？试着给它一些高度
在div#f上使用style="height:10px"属性
@VivekKumarBansal 这不能解决问题，我可以在 Safari 中使用 visibility: hidden 但不能使用 display: none

【解决方案1】：

您可以删除 display:none 并添加以下 CSS，这是我所知道的最简单和最跨浏览器的方法：

#file {
    height: 0;
    position: absolute;
    width: 0;
}

我没有为你提供 jsfiddle，因为它似乎不支持我的 safari 版本；）

【讨论】：

【解决方案2】：

试试这个

<div id="f" class="btn">Select Image
    <input type="file" class="file" name='athletes_imageid'  value="" />
</div>

样式

.btn{
    position: relative;
}
.file{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    bottom: 0;
    opacity: 0;
}

【讨论】：

【解决方案3】：

设置 type='hidden' 不使用样式。

**编辑：**

试试：

#file {
   height: 0;
   visibility: hidden;
   width: 0;
}

【讨论】：