<input type="file"> IE11 浏览器中的定位问题

Question

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

我有一个包含许多文件输入的 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'>&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>

在IE10浏览器中正常运行。文件输入通过按钮，按钮变为可点击。所以，我能够浏览文件。但在 IE11 浏览器中，html 文件元素出现在页面顶部的某个位置，浏览按钮不可点击。

Answer 1

您可以简单地告诉 IE11 像 IE10 一样运行，只需将以下元标记放入您的 <head>:

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

不过，在使用 <input type="file"> 时，我个人的偏好是使用 'display:none' 隐藏它，并使用 javascript 操纵它。虽然安全问题意味着您无法设置文件输入的值，但您仍然可以触发点击事件、订阅 onChange 事件（正如您已经在做的那样），以及读取一个文件输入的值，或者从files读取属性.

Answer 2

下面的怎么样：（添加到CSS）

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

Answer 3

对于 IE11，您只需定义 CSS width 和 height 的 #upload-file-container input CSS 规则

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

在IE11中打开上面的link会看到浏览文件输入触发器

#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，因为它们不会被其父元素继承。

Answer 4

这很奇怪，因为我在 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 is not working well together with scale on IE11。所以我的建议是删除比例部分，将其简化为 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'>&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>

编辑：由于您努力为不同的浏览器提供不同的转换值，我将照此进行并在我的回答中使用 -ms-transform。但我建议在你的 css 中也有一个标准化的 transform，这取决于你的决定。

Answer 5

考虑使用这种更简单的方法来实现相同的目的：

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

文件输入是隐藏的，但是点击标签会触发文件对话框。

不需要 javascript。无需绝对定位。

<input type="file"> IE11 浏览器中的定位问题

<input type="file"> positioning issues in IE11 browser

html

javascript

css

internet-explorer-11