html - 如何在 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