<input type="file"> проблемы с позиционированием в браузере IE11

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

ОТВЕТЫ

Ответ 1

Для IE11 вам просто нужно определить CSS width и height вашего правила CSS #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 */
}

Нет необходимости использовать CSS transform scale() или transform translate() в вашем элементе #upload-file-container input, если вам нужно сделать его подходящим или быть больше.

Все, что вам нужно установить, это width и height элемента. Особенно для IE11, поскольку для этого требуются width и height, поскольку они не наследуются их родительскими элементами.

Ответ 2

Это довольно странно, потому что я тестировал ваш фрагмент на 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. Поэтому Мое предложение состоит в том, чтобы удалить масштабную часть, уменьшив ее до просто 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>

Ответ 3

Подумайте об использовании этого гораздо более простого подхода для достижения того же:

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

Ввод файла скрыт, но нажатие на метку приведет к диалогу файла.

Нет необходимости в javascript. Абсолютное позиционирование не требуется.

Ответ 4

Вы можете просто сказать IE11 вести себя как IE10, поставив в свой <head> следующий метатег:

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

Мое личное предпочтение, однако, при работе с <input type="file"> заключается в том, чтобы скрыть его с помощью "display: none" и манипулировать им с помощью javascript. В то время как проблемы безопасности означают, что вы не можете установить значение ввода файла, вы все равно можете вызвать событие click, подписаться на событие onChange (как вы уже делаете), а также прочитать значение ввода файла или прочитать из свойство files.

Ответ 5

Как насчет следующего: (Добавить в CSS)

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