我的 <p:fileUpload> 上可能出现 CSS 错误答案

【问题标题】：Possible CSS error on my <p:fileUpload>我的 <p:fileUpload> 上可能出现 CSS 错误
【发布时间】：2014-01-16 14:09:14
【问题描述】：

我在我的项目中使用：Tomcat 7、JSF 2.2、Primefaces 4.0。

我的<p:fileUpload> 组件有一些问题。当我在左侧移动鼠标时，它会在“选择文件”按钮上触发mouseOver 事件。如果单击，则会触发“选择文件”操作。

如果我把鼠标放在红色矩形内，mouseOver 事件就会被触发。 http://i.imgur.com/W7HGGzR.png

我试过这个 CSS：

.ui-fileupload-buttonbar .ui-fileupload-choose input {
    position: fixed !important;
}

它修复了mouseOver 问题。但是当我单击“选择文件”按钮时，该操作不会触发。

【问题讨论】：

【解决方案1】：

根据 Diego 的回答，我添加了这个 css 规则：

.ui-fileupload-buttonbar {
    overflow:hidden;
}

这解决了问题，而无需添加除 css 之外的任何内容。

【讨论】：

【解决方案2】：

它有宽度吗？尝试float 或用 div 包装并设置overflow: hidden。

我们可以看到css样式吗？

【讨论】：

您好 Diego，感谢您的回答。 overflow: hidden 帮助了我，作为一种解决方法。现在，mouseOver 事件仅在底部和左侧的 p:fileUpload 内发生。这不是一个完整的修复，但对我来说很好。我会认为你的答案是正确的。非常感谢！我检查了 Chrome 上的元素（使用包装在 div 上的 p:fileUpload）。看看吧：i.imgur.com/9OziXBm.png
伙计，最好的解决方案：将display:hidden 设置为<input type="file">；将<span class="ui-button-text ui-c"> 更改为<label for="formUpload:upload_input" class="ui-button-text ui-c">
嗨迭戈。谢谢你的帮助。但我想我不能像你说的那样改变它。照片上的组件来自我的 .xhtml 文件中的<p:fileUpload>。我没有明确写出所有这些，只是<p:fileUpload>。

【解决方案3】：

我认为 CSS 与触发操作无关，它可能在您的 jquery 或您为“选择文件”所拥有的任何操作代码上。

【讨论】：