<input type = "file"> Positionierung Probleme in IE11 Browser

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

Ich bin eine Web-Anwendung Eingänge mit vielen Datei haben. Ich habe alle Dateielemente versteckt und platziere einen Knopf. Dies funktioniert in IE8 zu IE10 Browsern korrekt. Aber nicht in IE11. Unten ist mein Code 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>

Es funktioniert korrekt in IE10 Browser. Die Dateieingabe kommt über die Schaltfläche und die Schaltfläche wird anklickbar. So kann ich die Datei durchsuchen. Aber im Browser IE11 kommt das HTML-Dateielement irgendwo oben auf der Seite und die Schaltfläche Durchsuchen ist nicht anklickbar.

Quelle

2015-12-04 Nageswaran M

können Sie eine Arbeitsgeige teilen? –

@DeepakYadav: Habe ein kleines Code-Snippet hinzugefügt. Bitte lassen Sie mich wissen, wenn Sie weitere Informationen wünschen –

Sie fehlen ein Semikolon nach der Zeile: 'font-size: 11pt' Keine Ahnung, ob es hinter diesem Problem ist, aber es wird sicherlich nicht helfen. –

Für IE11 Sie müssen nur Ihre CSS definieren width und height Ihre #upload-file-container input CSS-Regel

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

öffnen die oben genannte Verbindung in IE11 und Sie werden sehen, die Browser-Datei Eingang Trigger

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

So Ihre CSS-Regel sieht insgesamt wie folgt aus:

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

Es gibt wirklich keine Notwendigkeit, eine CSS transform scale() oder transform translate() auf Ihrem #upload-file-container input Element zu verwenden, wenn Sie es passen oder größer sein vornehmen müssen.

Alles, was Sie einstellen müssen, ist ein width und height des Elements. Speziell für IE11, da es eine width und height erfordert, da sie nicht von ihren übergeordneten Elementen vererbt werden.

Quelle

2015-12-08 15:59:38

Sie könnten einfach IE11 sagen wie IE10 verhalten, indem Sie den folgenden Meta-Tag in Ihrem <head> setzen:

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

Meine persönliche Präferenz, obwohl, wenn sie mit <input type="file"> arbeitet, ist es zu verbergen ‚Display mit: none 'und manipuliere es mit Javascript. Während Sicherheitsprobleme bedeuten, dass Sie den Wert einer Dateieingabe nicht setzen können, können Sie immer noch das Klickereignis auslösen, das OnChange-Ereignis abonnieren (wie Sie bereits tun), und lesen Sie den Wert einer Dateieingabe oder lesen Sie aus der files Eigenschaft.

Quelle

2015-12-07 20:07:01 Dave

Ja; persönlich, ich habe gefunden, zu versuchen, zu hacken "Durchsuchen ..." Knopf Positionierung pro Browser war noch nie eine sehr erweiterbare Lösung. Etwas wird es immer vermasseln. – Katana314

@dave Ich habe versucht, das Emulate-Tag zu verwenden. Aber es gibt zwei Jsps auf meiner Seite. Mein JSP ist in einer anderen Seite enthalten. Ich habe den Code für das Hauptjsp nicht. Wenn ich also ein Meta-Tag in meine Seite lege, wird es vom Meta-Tag in der Haupt-Jsp-Seite überschrieben. –

Dies ist eher ein temporärer Hack als eine feste Lösung: "Dokument-Modi sind ab IE11 veraltet und sollten nicht mehr verwendet werden , außer auf temporärer Basis. Stellen Sie sicher, dass Websites aktualisiert werden, die auf Legacy-Funktionen und Dokumentmodi zurückgreifen, um modernen Standards zu entsprechen. " https://msdn.microsoft.com/en-us/library/bg182625(v=vs.85).aspx –

Wie über die folgenden: (In der CSS)

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

Quelle

2015-12-08 10:10:57 Deepak

Können Sie Ihren Header auch posten? Meta-Tag, wenn Sie spezifisch sein möchten .. – Deepak

Es ist ziemlich seltsam, weil ich Ihr Schnipsel auf IE 9 & 10 getestet habe und es dort auch nicht funktionierte.

Der Grund, warum ich nehme an, weil Sie

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

für Opera & Mozilla Anbieter verwandeln Präfix haben, aber nicht über ein Standard wie diese Transformation:

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

Oder ein Microsoft-Präfix-Transformation wie folgt:

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

Also wenn ich es stelle es in, es funktionierte wie Sie beschrieben: gut laufen auf IE 9 & 10 aber funktioniert nicht auf IE11. Also ich denke, das ist, wie dein eigentliches CSS sein soll.

Wie auch immer, um das Problem zu lösen: Offenbar translate2d is not working well together with scale on IE11. Also mein Vorschlag ist, den Skalenteil zu entfernen und ihn auf transform: translate(-300px, 0); zu reduzieren. Und so funktioniert es wieder:

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

bearbeiten: da Sie sich die Mühe nahmen verschiedenen Browser unterschiedlichen Transformationswert zu geben, ich werde Suite folgen und -ms-transform in meiner Antwort verwenden. Aber ich würde vorschlagen, auch in Ihrer CSS eine standardisierte transform zu haben, bis zu Ihrer Entscheidung.

Quelle

2015-12-08 19:27:29 AVAVT

Betrachten Sie diese viel einfacher Ansatz, das Gleiche zu erreichen:

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

Die Datei Eingang ist versteckt, aber auf dem Etikett klicken, wird die Datei-Dialog auslösen.

Kein Javascript erforderlich. Keine absolute Positionierung erforderlich.

Quelle

2015-12-14 20:11:20

<input type = "file"> Positionierung Probleme in IE11 Browser

Antwort

Verwandte Themen