FileInput在Firefox和Chrome中的行为不同

Question

我遇到了一个奇怪的问题，在使用HTML FileInput时，如果它太大，Firefox不会截断浏览按钮旁边的文件名，但Chrome会这样做。

以下是我正在使用的代码：

<input type="file" name="attributeDefaultValueFileInput" id="attributeDefaultValueFileInput" />

火狐：

铬：

由于我已经实现了这个功能，可以在固定大小的弹出窗口中使用，我面临的问题是，如果这个文件名变得太大，我的弹出窗口就变成了可滚动的，我不希望这样。

在这种情况下，有没有办法强制firefox像Chrome一样？

Answer 1

快速解决方法是使用div包装输入并在div的css上设置overflow:hidden。

演示：http://jsfiddle.net/GCu2D/2088/

HTML：

 <div>
  <input type="file" name="attributeDefaultValueFileInput" id="attributeDefaultValueFileInput" />
</div>

CSS：

div {
  width: 200px;
  overflow: hidden;
}

对于firefox，当用户将鼠标悬停在输入上时，文件的全名可见。