Pertanyaan masalah posisi di browser IE11


#upload-file-container {
  width: 50px;
  height: auto;
  overflow: hidden;
}
#upload-file-container input {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  border: solid transparent;
  border-width: 0 0 100px 200px;
  opacity: 0.0;
  filter: alpha(opacity=100);
  -o-transform: translate(250px, -50px) scale(1);
  -moz-transform: translate(-300px, 0) scale(4);
  direction: ltr;
  cursor: pointer;
}
.buttonText {
  color: #FFFFFF;
  letter-spacing: normal;
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-variant: normal;
  font-size: 11pt font-style: normal;
  text-decoration: none;
  text-transform: none;
  width: 20px;
}
.buttonSpace {
  height: 23px;
  width: 20;
  background-image: url(/portal/images/clearpixel.gif);
}
.buttonRegHead {
  height: 23px;
  width: 7px;
  padding: 0;
  margin: 0;
  background-image: url(/DIPAPWebAppln/images/button_regular_head.gif);
  background-repeat: no-repeat;
}
.buttonRegBody {
  height: 23px;
  padding: 0;
  margin: 0;
  background-image: url(/DIPAPWebAppln/images/button_regular_body.gif);
  background-repeat: repeat-x;
}
.buttonRegTail {
  height: 23px;
  width: 7px;
  padding: 0;
  margin: 0;
  background-image: url(/DIPAPWebAppln/images/button_regular_tail.gif);
  background-repeat: no-repeat;
}
<html>
<table>
  <tr>
    <td align="left" nowrap class="formLabel">IMAGE1:<font color="red">*</font>
    </td>
    <TD>
      <table border=0 cellspacing=0 cellpadding=0>
        <tr>
          <td class='buttonSpace'>&nbsp;</td>
          <td class='buttonRegHead'>&nbsp;</td>
          <td class='buttonRegBody'>
            <div class="buttonText" id="upload-file-container">Browse
              <input type="file" name="realfile1" id="realfile1" onChange="if(validate())preview(this, '1');return true;" />
            </div>
          </td>
          <td class='buttonRegTail'>&nbsp;</td>
        </tr>
      </table>
    </TD>
  </tr>
</table>

</html>

Saya memiliki aplikasi web dengan banyak input file. Saya telah menyembunyikan semua elemen file dan menempatkan sebuah tombol. Ini berfungsi dengan benar di IE8 ke browser IE10. Namun tidak di IE11. Di bawah ini adalah Snipet kode saya:

<style>
    #upload-file-container {
        width:50px;
        height: auto;
        overflow: hidden;
    }
    #upload-file-container input {
        position: absolute;
        top: 0; right: 0; margin: 0;
        border: solid transparent;
        border-width: 0 0 100px 200px;
        opacity: 0.0;
        filter: alpha(opacity=0);
        -o-transform: translate(250px, -50px) scale(1);
        -moz-transform: translate(-300px, 0) scale(4); 
        direction: ltr;
        cursor: pointer;
    }
    .buttonText {
        color: #FFFFFF;
        letter-spacing: normal;
        font-family: Arial, sans-serif;
        font-weight: bold;
        font-variant: normal;
        font-size: 11pt
        font-style: normal;
        text-decoration: none;
        text-transform: none;
        width: 20px;
    }
</style>

<table border=0 cellspacing=0 cellpadding=0>
    <tr> 
        <td class='buttonSpace'>&nbsp;</td>
        <td class='buttonRegHead'>&nbsp;</td>
        <td class='buttonRegBody'>
            <div  class="buttonText" id="upload-file-container">    
                <%=DipapDictionary.translate(request,"Browse")%>
                <input type="file" name="realfile1" id="realfile1" onChange="if(validate())preview(this, '1');return true;"/>
            </div>
        <td class='buttonRegTail'>&nbsp;</td>
    </tr>
</table>

Ini berfungsi dengan benar di browser IE10. Input file akan muncul di atas tombol dan tombol menjadi dapat diklik. Jadi, saya bisa menelusuri file. Namun di browser IE11, elemen file html akan muncul di suatu tempat di bagian atas halaman dan tombol browse tidak dapat diklik.


15
2017-12-04 15:12


asal


Jawaban:


Untuk IE11 Anda hanya perlu mendefinisikan CSS Anda width dan height Anda #upload-file-container input Aturan CSS

http://codepen.io/jonathan/pen/LGEJQg/?editors=110

Buka tautan di atas di IE11 dan Anda akan melihat pemicu input file jelajah

#upload-file-container input {
    width:100%;
    height:100%;
}

Jadi aturan CSS Anda sama sekali terlihat seperti ini:

#upload-file-container input {
    position: absolute;
    top: 0; right: 0; margin: 0;
    border: solid transparent;
    border-width: 0 0 100px 200px;
    opacity: 0.0;
    filter: alpha(opacity=0);
    -o-transform: translate(250px, -50px) scale(1);
    -moz-transform: translate(-300px, 0) scale(4); 
    direction: ltr;
    cursor: pointer;

    width:100%; /* add width */
    height:100%; /* add height */
}

Benar-benar tidak perlu menggunakan CSS transform scale() atau transform translate() pada Anda #upload-file-container input elemen, jika Anda perlu membuatnya cocok atau lebih besar.

Yang Anda perlukan untuk mengatur adalah a width dan height elemen. Khusus untuk IE11 karena membutuhkan width dan height karena mereka tidak diwarisi oleh elemen induknya.


1
2017-12-08 15:59



Ini cukup aneh karena saya menguji snippet Anda pada IE 9 & 10 dan itu tidak berfungsi di sana juga.

Alasan yang saya duga adalah karena Anda telah mengubah prefixed untuk vendor Opera & Mozilla

-o-transform: translate(250px, -50px) scale(1);
-moz-transform: translate(-300px, 0) scale(4); 

Tetapi tidak memiliki transformasi standar seperti ini:

transform: translate(-300px, 0) scale(4); 

Atau Microsoft-awalan berubah seperti ini:

-ms-transform: translate(-300px, 0) scale(4); 

Jadi ketika saya memasukkannya, itu bekerja seperti yang Anda gambarkan: berjalan dengan baik pada IE 9 & 10 tetapi tidak berfungsi pada IE11. Jadi saya rasa ini adalah bagaimana sebenarnya css Anda seharusnya.

Pokoknya, untuk menyelesaikan masalah: Rupanya translate2d tidak berfungsi dengan baik bersama dengan skala pada IE11. Jadi saran saya adalah untuk menghapus bagian skala, menguranginya secara sederhana transform: translate(-300px, 0);. Maka, itu berhasil lagi:

#upload-file-container {
  width: 50px;
  height: auto;
  overflow: hidden;
}
#upload-file-container input {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  border: solid transparent;
  border-width: 0 0 100px 200px;
  opacity: 0.0;
  filter: alpha(opacity=100);
  -o-transform: translate(250px, -50px) scale(1);
  -moz-transform: translate(-300px, 0) scale(4);
  -ms-transform: translate(-300px, 0);
  direction: ltr;
  cursor: pointer;
}
.buttonText {
  color: #FFFFFF;
  letter-spacing: normal;
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-variant: normal;
  font-size: 11pt font-style: normal;
  text-decoration: none;
  text-transform: none;
  width: 20px;
}
.buttonSpace {
  height: 23px;
  width: 20;
  background-image: url(/portal/images/clearpixel.gif);
}
.buttonRegHead {
  height: 23px;
  width: 7px;
  padding: 0;
  margin: 0;
  background-image: url(/DIPAPWebAppln/images/button_regular_head.gif);
  background-repeat: no-repeat;
}
.buttonRegBody {
  height: 23px;
  padding: 0;
  margin: 0;
  background-image: url(/DIPAPWebAppln/images/button_regular_body.gif);
  background-repeat: repeat-x;
}
.buttonRegTail {
  height: 23px;
  width: 7px;
  padding: 0;
  margin: 0;
  background-image: url(/DIPAPWebAppln/images/button_regular_tail.gif);
  background-repeat: no-repeat;
}
<html>
<table>
  <tr>
    <td align="left" nowrap class="formLabel">IMAGE1:<font color="red">*</font>
    </td>
    <TD>
      <table border=0 cellspacing=0 cellpadding=0>
        <tr>
          <td class='buttonSpace'>&nbsp;</td>
          <td class='buttonRegHead'>&nbsp;</td>
          <td class='buttonRegBody'>
            <div class="buttonText" id="upload-file-container">Browse
              <input type="file" name="realfile1" id="realfile1" onChange="if(validate())preview(this, '1');return true;" />
            </div>
          </td>
          <td class='buttonRegTail'>&nbsp;</td>
        </tr>
      </table>
    </TD>
  </tr>
</table>

</html>

Edit: karena Anda mengambil upaya untuk memberikan nilai transformasi berbeda pada browser yang berbeda, saya akan mengikuti dan menggunakan suite -ms-transform dalam jawaban saya. Tapi saya akan menyarankan memiliki standar transform di css Anda juga, hingga keputusan Anda.


1
2017-12-08 19:27



Pertimbangkan untuk menggunakan pendekatan yang lebih sederhana ini untuk mencapai hal yang sama:

<label>
    Click me!
    <input type="file" style="display:none" onchange="alert('do stuff')"/>
</label>

Masukan file disembunyikan, tetapi mengeklik label akan memicu dialog file.

Tidak diperlukan javascript. Tidak diperlukan penentuan posisi mutlak.


1
2017-12-14 20:11



Anda hanya bisa mengatakan IE11 untuk berperilaku sebagai IE10, dengan meletakkan meta-tag berikut di Anda <head>:

<meta http-equiv="X-UA-Compatible" content="IE=10">

Namun, preferensi pribadi saya saat bekerja dengannya <input type="file"> adalah menyembunyikannya menggunakan 'display: none', dan memanipulasinya menggunakan javascript. Sementara masalah keamanan berarti Anda tidak bisa set nilai input file, Anda masih dapat memicu peristiwa klik, berlangganan ke acara onChange (seperti yang sudah Anda lakukan), dan Baca baca nilai input file, atau baca dari file milik.


0
2017-12-07 20:07



Bagaimana dengan yang berikut: (Tambahkan ke CSS)

input[type=file]
{
margin-right:something;
margin-left:something;
left:something;
right:something;
top:something;
bottom:something;
}

0
2017-12-08 10:10