#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文件元素位于页面顶部的某个位置,并且浏览按钮不可单击。
答案 0 :(得分:1)
对于IE11,您只需要定义width
CSS规则的CSS height
和#upload-file-container input
<强> 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 */
}
如果您需要使其适合或更大,则无需在transform scale()
元素上使用CSS transform translate()
或#upload-file-container input
。
您需要设置的只是元素的width
和height
。特别是对于IE11,因为它需要width
和height
,因为它们不会被父元素继承。
答案 1 :(得分:1)
It is quite strange because I tested your snippet on IE 9 & 10 and it wasn't working there as well.
The reason I presume is because you have prefixed transform for Opera & Mozilla vendors
document.getElementById("outputForm").elements...
But don't have a standard transform like this:
-o-transform: translate(250px, -50px) scale(1);
-moz-transform: translate(-300px, 0) scale(4);
Or a Microsoft-prefixed transform like this:
transform: translate(-300px, 0) scale(4);
So when I put it in, it was working as you described: run well on IE 9 & 10 but doesn't work on IE11. So I reckon this is how your actual css is supposed to be.
Anyway, to solve the problem: Apparently translate2d is not working well together with scale on IE11. So My suggestion is to remove the scale part, reducing it to simply -ms-transform: translate(-300px, 0) scale(4);
. And so, it works again:
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;
}
Edit: since you took the effort to give different browsers different transform value, I will follow suite and use <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>
in my answer. But I would suggest having a standardized -ms-transform
in your css as well, up to your decision.
答案 2 :(得分:1)
考虑使用这种更简单的方法来实现同样的目标:
<label>
Click me!
<input type="file" style="display:none" onchange="alert('do stuff')"/>
</label>
文件输入被隐藏,但点击标签将触发文件对话框。
不需要javascript。不需要绝对定位。
答案 3 :(得分:0)
您可以通过在<head>
中添加以下元标记来告诉IE11表现为IE10:
<meta http-equiv="X-UA-Compatible" content="IE=10">
但是,在使用<input type="file">
时,我的个人偏好是使用&display:none&#39;隐藏它,并使用javascript操纵它。虽然安全问题意味着您无法设置文件输入的值,但您仍然可以触发click事件,订阅onChange事件(正如您已经在做的那样),以及读取文件输入的值,或从files属性读取。
答案 4 :(得分:0)
以下内容:(添加到CSS)
input[type=file]
{
margin-right:something;
margin-left:something;
left:something;
right:something;
top:something;
bottom:something;
}