Question

我遇到Edge和IEv11不能正确显示“输入类型文件”框的问题。

Screenshot

<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中看起来还不错。

Answer 1

开始时这不一定是“错误的”-关于浏览器应如何呈现这样的文件上传控件，没有真正严格的规范。

如果您要完全控制外观，最好的选择是实施此处介绍的技术https://tympanus.net/Tutorials/CustomFileInputs/

这基本上隐藏了浏览器为此类文件输入字段呈现的本机控件，并将其替换为您选择的表示形式。（这需要JavaScript才能充分发挥作用，但是如果JS不可用，则可以很容易地实现，使其仍然显示原始控件。）

Answer 2

我不是很想得到答案，但这是Edge / IE中其余结果之间最好的折衷。 Result from Firefox

Result from Edge (IE identical)

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

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

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

Edge＆IE11无法正确显示输入类型文件框

2 个答案: