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

Question

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

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

在 Google Chrome 中，显示似乎正确：

然而，在 IE8 中，并没有那么多：

我知道这是一个小细节，但仍然无理取闹。你们中的任何一个人都会碰巧知道为什么文本没有垂直对齐，我该怎么做才能修复它？也许这不是正常行为，我做错了什么？

我尝试添加以下内容 CSS:

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

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

Answer 1

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

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

Answer 2

文件输入实际上是依赖于平台的，并且没有标准的方式来设置它们的样式...我过去使用过它们，大多数人倾向于做的是创建一个不可见的文件输入和一个单独的 text-input/button组合。单击按钮然后触发文件输入的单击，并且在文件输入具有值后，它通过 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

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

How to vertically align filename on file input in IE8

html

css

internet-explorer

file-upload

internet-explorer-8