为什么这适用于除 Opera 之外的所有其他浏览器？答案

【问题标题】：How come this works on all other browsers exept Opera?为什么这适用于除 Opera 之外的所有其他浏览器？
【发布时间】：2011-10-29 10:31:53
【问题描述】：

我正在使用一个脚本，它将通常的文件上传输入替换为您想要的任何图像，然后使用 JS 确保当鼠标移到您想要的图像上时，鼠标指针下方有一个不可见的“浏览”按钮使用。

它适用于 ie7 ie8 ie9 Firefox、Safari、Chrome，但不适用于 Opera。在 Opera 上会出现常规文件输入。

我知道有很多脚本可以做类似的事情，但要么它们太复杂以至于我无法弄清楚如何使用它们（例如uploadify），要么它们做类似的事情但效果不佳 - 比如制作自定义图像与文件输入的大小相同（也有问题）。

为什么它在 Opera 中不起作用。有没有办法修复它？除了不在 Opera 中工作之外，这非常适合我想要的。

【问题讨论】：

您提供的参考shauninman.com/archive/2007/09/10/… 说，它不适用于 Opera。页面中有注释如何修复它，搜索 Opera。该库是 2007 年的，所以有点过时了。
@mliebelt 感谢您的回复。我看到它说它不适用于歌剧，但认为没有发布解决方案。你的意思是： if (some_element.style.opacity !== undefined) {works}
当我查看source code 时，我看到以if (window.opera || (ie && ie < 5.5) 开头的行...我会尝试只删除window.opera || 的部分，然后再试一次。
您好，再次感谢。如果我删除它确实像您说的那样出现，但是当您将鼠标悬停在图像顶部时，“浏览”按钮可见:(
这不是 Stack Overflow 的有效问题。您需要在问题中包含您正在使用的脚本，而不仅仅是指向它的链接。

【解决方案1】：

有趣的案例，显示了一个我不知道的 Opera 布局错误：如果移动不透明度设置为 0 的文件输入，使得输入的文本区域部分位于父级之外，则输入将变为可见。我将报告此问题的错误并跟进。

要解决此问题并使脚本正常工作，您可以这样做：

我已将其限制为仅在 Opera 中运行，并且仅在 11.50 及更高版本中运行。原因是如果单击“文本输入”部分，大多数较旧的 Opera 版本不会打开文件对话框。在低于 11.50 的 Opera 版本中，您将因此得到错误的显示（但该功能将起作用）。

我希望这可以帮助您解决该错误。我不知道它是否面向未来。文件输入将来可能会发生一些变化。

【讨论】：

【解决方案2】：

我对您的示例 (SI.Files and example) 进行了一些尝试，并试图找出它在 Opera 中不起作用（很好）的原因。这是我的“研究”结果：

检查if (window.opera ||... 是该功能被完全阻止的原因。如果你删除它...
然后您会获得（以前）隐藏按钮的动态图像，该按钮会覆盖您要显示的图像。
如果您完全删除函数elem.parentNode.onmousemove = function(e) {...}，按钮将不会显示，但Chrome 中也不会显示光标...在Opera 中，您现在看到的光标是输入字段的条形光标。
如果您按下“按钮”，则会调用下载对话框的函数。

也许您应该看看问题"Styling an input type=“file” button" 以及那里对工作解决方案的引用：

【讨论】：

谢谢，我会看看你的建议。感谢您抽出宝贵时间为我查看 :)
嘿，抱歉现在才回复，我在喝酒。您的建议有效，但不幸的是在 IE7、8 和 9 中中断，它似乎只是您可以输入的文本输入（除非您不能输入）。我已经阅读了您链接到的那些文章，但我不确定它们是否能解决我的问题？但我可能会误解他们，我还是有点醉了:)