<输入类型=“文件”>IE11浏览器中的定位问题
<input type="file"> positioning issues 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'> </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文件元素位于页面顶部的某个位置，并且浏览按钮不可单击。
对于 IE11，您只需要定义您的 CSS width和#upload-file-container input CSS 规则的height
http://codepen.io/jonathan/pen/LGEJQg/?editors=110
在IE11中打开上面的链接，您将看到浏览文件输入触发器
#upload-file-container input {
width:100%;
height:100%;
}
所以你的CSS规则完全看起来像这样：
#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 */
}
#upload-file-container input元素上使用CSS transform scale()或transform translate()，如果你需要让它适合或更大。
您只需要设置元素的width和height。特别是对于IE11，因为它需要width和height，因为它们不会被其父元素继承。
这很奇怪，因为我在IE 9和10上测试了你的代码片段，但它在那里也不起作用。
我认为的原因是因为你为Opera和Mozilla供应商提供了前缀转换
。-o-transform: translate(250px, -50px) scale(1);
-moz-transform: translate(-300px, 0) scale(4);
但是不要有这样的标准转换：
transform: translate(-300px, 0) scale(4);
或者像这样以Microsoft前缀的转换：
-ms-transform: translate(-300px, 0) scale(4);
所以当我把它放进去时，它就像你描述的那样工作：在IE 9和10上运行良好，但在IE11上不起作用。所以我认为这就是你实际的css应该的样子。
无论如何，为了解决这个问题：显然translate2d不能很好地与IE11上的scale配合使用。所以我的建议是删除比例部分，将其简化为简单的transform: translate(-300px, 0);.因此，它再次起作用：
#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'> </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>编辑：由于您努力为不同的浏览器提供不同的转换值，因此我将遵循套件并在我的答案中使用-ms-transform。但我建议在你的css中也有一个标准化的transform，这取决于你的决定。
考虑使用这种更简单的方法来实现相同的目标：
<label>
Click me!
<input type="file" style="display:none" onchange="alert('do stuff')"/>
</label>
输入是隐藏的，但单击标签将触发文件对话框。
不需要JavaScript。无需绝对定位。
您可以通过在
<head>中放置以下元标记来简单地告诉 IE11 的行为与 IE10 相同：
<meta http-equiv="X-UA-Compatible" content="IE=10">
不过，在使用<input type="file">时，我个人的偏好是使用"display：none"隐藏它，并使用javascript进行操作。 虽然安全问题意味着您无法设置文件输入的值，但您仍然可以触发单击事件、订阅 onChange 事件(就像您已经在做的那样(，并读取文件输入的值，或从 files 属性读取。
下面怎么样：(添加到 CSS(
input[type=file]
{
margin-right:something;
margin-left:something;
left:something;
right:something;
top:something;
bottom:something;
}
相关文章：
- 访问布局信息是否也会导致浏览器重排
- 内部分区字体大小获胜'调整浏览器窗口大小时不会随媒体查询而更改
- 如何使用phaser使html5游戏在移动设备浏览器上运行
- 有时数据是't显示在浏览器中
- 使图像在单击时展开到不大于浏览器
- fetch(） 函数未在 Ubuntu Chromium 浏览器上定义
- 不同浏览器中的空白字符正则表达式行为
- 在Windows 10中自动执行例行程序(主要与浏览器交互）
- 使用IE10/IE11进行浏览器检测
- Unwanted ngClick在IE11浏览器中被解雇
- 如何在ie10和ie11中隐藏浏览器默认工具提示
- <输入类型=“文件”>IE11浏览器中的定位问题
- showModalDialog()在IE11浏览器中不能正常工作
- [Protracot][IE11]—>当我点击一个链接，它不能打开一个新的选项卡，即使我设置正确的IE浏览器
- 在ie11浏览器中出现语法错误，但在Chrome浏览器中没有问题
- VB.Net web浏览器抑制脚本错误，不工作在IE10和IE11
- JavaScript在ie11中没有像预期的那样运行，但在所有其他浏览器中都运行良好
- asp.net mvc-在IE11移动浏览器中未定义的Javascript代码，但可在Chrome、Firefox、IE
- onreadystatechange 在 IE11 中有效，但在其他浏览器中无效
- 当作为 Web 应用程序运行时，对象不支持 IE11 上的属性或方法“create”，在浏览器中直接打开 HTML 时很
