【发布时间】：2015-12-04 15:12:57
【问题描述】：
#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'> </td>
<td class='buttonRegHead'> </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'> </td>
</tr>
</table>
</TD>
</tr>
</table>
</html>我有一个包含许多文件输入的 Web 应用程序。我隐藏了所有文件元素并放置了一个按钮。这在 IE8 到 IE10 浏览器中正常工作。但不是在 IE11 中。以下是我的代码片段：
<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'> </td>
<td class='buttonRegHead'> </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'> </td>
</tr>
</table>
在 IE10 浏览器中运行正常。文件输入来自按钮，按钮变为可点击。所以，我可以浏览文件。 但是在 IE11 浏览器中，html 文件元素出现在页面顶部的某个位置，并且浏览按钮不可点击。
【问题讨论】：
-
你能分享一个工作小提琴吗？
-
@DeepakYadav：添加了一个小代码sn-p。如果您想了解更多信息，请告诉我
-
您在行后缺少一个分号：
font-size: 11pt不知道它是否是这个问题的原因，但它肯定无济于事。
标签： javascript html css internet-explorer-11