Edge＆IE11無法正確顯示輸入類型文件框

Question

我遇到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中看起來不錯。

Answer 1

首先，這不一定是“錯誤的”-關於瀏覽器應如何呈現這樣的文件上傳控件，沒有真正嚴格的規范。

如果要完全控制外觀，最好的選擇是實施此處介紹的技術， https：//tympanus.net/Tutorials/CustomFileInputs/

這基本上隱藏了瀏覽器為此類文件輸入字段呈現的本機控件，並將其替換為您選擇的表示形式。 （這需要JavaScript才能充分發揮作用，但是可以輕松實現，即使JS不可用，它仍然可以顯示原始控件。）

Answer 2

不是我想要的答案，但這是Edge / IE中其余結果之間最好的折衷。 Firefox的結果

Edge的結果（即相同的IE）

我將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來匹配表單中的其他框。