如何在IE8中的文件输入上垂直对齐文件名

Question

我有一个动态呈现 FileUpload 控件的页面。在运行时，Asp 生成以下输入：

<input name="ctl00$ContentPlaceHolder1$ucPF$ucCustomField2$field2" id="field2" 
       type="file" Validators="[object HTMLSpanElement]" 
       cachedHoverStateItem="[object Object]"/>

在谷歌浏览器中，显示似乎是正确的：

但是，在 IE8 中，并没有那么多：

我知道这是一个小细节，但它仍然不合理地困扰着我。你们中的任何人都会碰巧知道为什么文本没有垂直对齐，我能做些什么来解决它？也许这不是正常行为，我做错了什么？

我已尝试添加以下 CSS：

input[type="file"] {
    line-height: 1ex;
}

但这并没有改变任何东西。

Answer 1

文件输入实际上是依赖于平台的，并且没有标准的方式来设置它们的样式......我过去曾使用过它们，大多数人倾向于做的是创建一个不可见的文件输入和一个单独的文本输入/按钮组合。按钮的点击然后触发文件输入的点击，并在文件输入具有值后通过Javascript将其复制到文本输入。

类似这样的东西（伪代码）：

<input type="file" id="file" style="visibility:hidden" onchange="setFile(this.files[0])" />
<input type="text" id="filename">
<button onclick="document.getElementById('file').click()" />

在 Javascript 中使用类似的东西：

function setFile(file) {
    var input = document.getElementById("filename");
    input.value = file.name;
}

上面的代码断言你只支持支持新的（正在进行的草案）文件 API 的浏览器，当然也有办法为旧的浏览器做到这一点......

---

描述了另一种方法（适用于旧版浏览器）here

Answer 2

input[type="file"] {
    line-height: 1ex;
}

这是文本框的行高吗？我认为ex 表示字母本身的高度。尝试添加实际盒子的高度。