输入文件未在IE上打开文件上传框

Question

我有一个label元素,连同它的相应input type="file",也包含img夹在两个span元素之间.

它input本身被声明为display:none,允许在label单击其中的任何元素时执行启动文件上载框的工作.当然,这在IE以外的每个主要浏览器中都可以使用.在IE浏览器中,单击除了label 其他位置之外的任何位置img将启动"文件上载"框,但单击" img不会..."

您可以通过在IE中打开这个小提琴以及任何其他浏览器来复制此问题.

奇怪的是,这个问题可以被孤立到存在form.出于某种原因,当form移除包装时,标签正常运行.我显然不能用这个作为解决方案.思考？

Answer 1

这是IE中的已知错误,您可以在Microsoft Connect中看到它

解决简单添加pointer-events: none;到<img>

它可能会导致某些浏览器在单击时突出显示图像.为避免这种情况,使图像无法选择.

完整的解决方案是:

.selector-for-image {
  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

请参阅更新的JSFiddle