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

【问题标题】：Input file not opening File Upload box on IE输入文件未在 IE 上打开文件上传框
【发布时间】：2018-04-13 04:53:03
【问题描述】：

我有一个label 元素，它与其对应的input type="file" 一起，还包含一个夹在两个span 元素之间的img。

input 本身被声明为display:none，允许label 在单击其中的任何元素时启动“文件上传”框的工作。当然，这在除 IE 之外的所有主流浏览器中都能正常工作。在 IE 中，单击 label other 内的任何位置而不是 img 将启动文件上传框，但单击 img 不会...

您可以通过在任何其他浏览器旁边的 IE 中打开 this fiddle 来查看此问题。

奇怪的是，这个问题可以被隔离到form 的存在。出于某种原因，当 form 包装器被删除时，标签功能正确。不过，我显然不能将其用作解决方案。想法？

【问题讨论】：

作为一种解决方法，您可以将paperclip 转换为带有背景图像的跨度。这行得通，见updated fiddle；虽然这不是一个解决方案，所以不要发布作为答案。
@MrLister 谢谢。我可以在我的代码中复制它，它实际上作为一种解决方法可以正常工作。正如你所说，这不是一个解决方案。
嗯 IE 对规范是正确的，标签不允许包含任何元素，包括你的 img 标签，developer.mozilla.org/en-US/docs/Web/HTML/Element/label

标签： html css internet-explorer label forms

【解决方案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;
}

见updated JSFiddle

【讨论】：