我們使用自定義上傳按鈕,一般將input type=”file”透明覆蓋在自定義按鈕的上面

<span class="file">
    <em class="iconfont icon-xuanzezhaopian"></em>
    選擇照片<input type="file" class="do-upload-banner" multiple="" name="file" id="">
</span>

這樣寫在非IE的情況下沒有什麼問題,當時當在IE裡會出現噁心的游標閃爍

在IE11下解決方法很簡單,只需要將 font-size

font-size: 0;
width: 100%;
height: 100%;

這種方法沒法解決IE10-需要點選兩次才能上傳的問題,首先在這我們需要弄明白為什麼IE10-需要點選兩次才能調出檔案選擇框

知道什麼原因就好解決了,只要想辦法將右邊的瀏覽按鈕填充滿整個容器就好了

left: auto !important;
right: 0;
font-size: 100px;
width: 200%;
height: 130%;

然而這裡的程式碼和IE11中的有些程式碼衝突,所以在這裡我們需要使用CSS Hack處理

.cursor-blink {
  font-size
 
: 0;
  width: 100%;
  height: 100%;
  left: auto\9 !important;
  right: 0\9 !important;
  font-size: 100px\9;
  width: 200%\9;
  height: 130%\9;
}

注意這裡需要將 font-size 儘量設定大一些,如果不設定,依舊是雙擊才能調出檔案選擇框