<input type = "file"> Problemy pozycjonowania w IE11 przeglądarce

#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>

Mam aplikację internetową z wieloma wejściami plików. Ukryłem wszystkie elementy plików i umieściłem przycisk. Działa to poprawnie w przeglądarkach IE8 do IE10. Ale nie w IE11. Poniżej znajduje się mój kod Snippet:

<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>

Działa poprawnie w przeglądarce IE10. Wejście do pliku przechodzi nad przyciskiem, a przycisk staje się klikalny. Tak, jestem w stanie przeglądać plik. Jednak w przeglądarce IE11 element pliku html nadchodzi gdzieś na górze strony, a przycisk przeglądania nie jest klikalny.

Źródło

2015-12-04 Nageswaran M

Czy możesz udostępnić działające skrzypce? –

@DeepakYadav: Dodano mały fragment kodu. proszę dać mi znać, jeśli chcesz uzyskać więcej informacji –

Brakuje średnika po linii: 'font-size: 11pt' Nie mam pojęcia, czy to kryje się za tym problemem, ale z pewnością nie pomoże. –

Dla IE11 wystarczy zdefiniować CSS width i height z reguły CSS #upload-file-container input

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

Otwarte powyższy link w IE11, a zobaczysz wyzwalacz wejściowy do pliku przeglądania

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

Więc reguła CSS w ogóle wygląda następująco:

#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 */ 
}

Naprawdę nie ma potrzeby korzystania z CSS transform scale() lub transform translate() na elemencie #upload-file-container input, jeśli trzeba, aby dopasować lub być większe.

Wszystko, co musisz ustawić, to width i height tego elementu. Zwłaszcza w przypadku IE11, ponieważ wymaga on width i height, ponieważ nie są one dziedziczone przez elementy macierzyste.

Źródło

2015-12-08 15:59:38

Można po prostu powiedzieć IE11 zachowywać jako IE10, umieszczając następujące meta-tag w <head>:

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

Moje osobiste preferencje, choć podczas pracy z <input type="file"> jest ukrycie go za pomocą „display: none "i manipulować przy użyciu javascript. Podczas gdy problemy z bezpieczeństwem oznaczają, że nie można ustawić wartości wejściowej pliku na , nadal można wywołać zdarzenie click, subskrybować zdarzenie onChange (tak jak już to robisz), a odczytać wartość wejściowego pliku lub przeczytaj z właściwości files.

Źródło

2015-12-07 20:07:01 Dave

Tak; Osobiście znalazłem próbę zhackowania przycisku "Przeglądaj ..." pozycjonowanie na przeglądarkę nigdy nie było bardzo rozszerzalnym rozwiązaniem. Coś zawsze zepsuje to. – Katana314

@dave Próbowałem użyć emulującego tagu. Ale na mojej stronie są dwa jsp. Mój jsp jest zawarty na innej stronie. Nie mam kodu głównego jsp. Więc jeśli umieściłem metatag na mojej stronie, zostanie on przesłonięty przez metatag na głównej stronie JSP. –

To jest bardziej tymczasowy hak niż rozwiązanie stałe: "Począwszy od IE11 tryby dokumentów są przestarzałe i nie powinny być już używane , z wyjątkiem tymczasowych. Pamiętaj, aby aktualizować witryny, które opierają się na starszych funkcjach i trybach dokumentów, aby odzwierciedlały nowoczesne standardy. " https://msdn.microsoft.com/en-us/library/bg182625(v=vs.85).aspx –

Jak o następujące elementy: (Dodaj do CSS)

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

Źródło

2015-12-08 10:10:57 Deepak

Czy możesz również opublikować nagłówek? Metatag jeśli chcesz być konkretny .. – Deepak

To dość dziwne, ponieważ przetestowałem Twój fragment na IE 9 & 10 i nie działało tam również.

Powodem Przypuszczam, dlatego zostały poprzedzone przekształcić do Opera & Mozilla sprzedawców

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

ale nie mają standardową przekształcić tak:

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

Albo Microsoft prefiksem przekształcać w następujący sposób:

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

Kiedy kładę to działało zgodnie z opisem: działa dobrze na IE 9 & 10, ale nie działa na IE11. Tak więc myślę, że tak powinno wyglądać twoje rzeczywiste css.

W każdym razie, aby rozwiązać problem,: Podobno translate2d is not working well together with scale on IE11. Tak więc moja sugestia polega na usunięciu części skali, redukując ją tak, aby była po prostu transform: translate(-300px, 0);. I tak, to znowu działa:

#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: skoro wziął starań, aby zapewnić różnych przeglądarek innego przekształcenia wartości, pójdę za pakiet i korzystać -ms-transform w mojej odpowiedzi. Ale sugerowałbym posiadanie standardowej wersji transform również w twoim css, aż do twojej decyzji.

Źródło

2015-12-08 19:27:29 AVAVT

Zastanów się nad wykorzystaniem tego znacznie prostsze podejście, aby osiągnąć to samo:

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

Wejście plik jest ukryty, ale kliknięcie na etykiecie wywoła okno dialogowe pliku.

Nie jest potrzebny javascript. Bez absolutnego pozycjonowania.

Źródło

2015-12-14 20:11:20

<input type = "file"> Problemy pozycjonowania w IE11 przeglądarce

Odpowiedz

Powiązane problemy