Edge & IE11 未正确显示输入类型文件框答案

【问题标题】：Edge & IE11 not displaying Input type file box correctlyEdge & IE11 未正确显示输入类型文件框
【发布时间】：2019-02-02 18:02:31
【问题描述】：

Edge 和 IEv11 出现问题，无法正确显示“输入类型文件”框。

<form action = "" method = "POST" >
<table width="100%" style="font-size:12px">
    <tbody>
        <tr><th colspan="2" style="font-size:12px;font-style:italic;color:#a00000;text-align:left">Select your image file&#8230;</th></tr>
        <tr><td><div style="width:140px"></div></td><td><input type = "file" name = "image" /></td></tr>
        <tr><td></td><td align="left"><input type = "submit" value="Upload" name="Upload Image"  /></td></tr>
    </tbody>
</table>

我的代码是错误的还是有解决方法？在 Firefox 和 Safari 中看起来不错。

【问题讨论】：

标签： html forms internet-explorer microsoft-edge

【解决方案1】：

这并不一定是“错误的”——对于浏览器应该如何呈现这样的文件上传控件并没有真正严格的规范。

如果你想完全控制它的外观，你最好的选择是实现这里介绍的技术，https://tympanus.net/Tutorials/CustomFileInputs/

这基本上隐藏了浏览器为此类文件输入字段呈现的本机控制，并将其替换为您选择的表示。（这需要 JavaScript 才能完全工作，但可以很容易地以这样一种方式实现，如果 JS 不可用，它仍然会显示原始控件。）

【讨论】：

【解决方案2】：

不是我想要的答案，但它是 Edge/IE 其余结果之间的最佳折衷方案。 Result from Firefox

Result from Edge (IE identical)

我将 Input 元素包装在一个 div 中...

&lt;div class="dbrdForm" style="background-color:#fff;  width:240px; height:22px;padding:0;border-radius:10px; border: 2px inset #ddd;"&gt;&lt;input type = "file" name = "image" /&gt;&lt;/div&gt;

240px 的宽度是我可以使用的最大宽度，任何更大的宽度都会导致框延伸到 Edge/IE 中浏览按钮的右侧。我最初在FF中使用350px来匹配表单中的其他框。

【讨论】：