Кнопка "Обзор" с группой ввода обрезает IE9

Используя bootstrap, я создал input-group с помощью button и input type='file'.

Он отлично работает везде, кроме IE9. В IE9 кнопка обзора просматривается с правой стороны.

Демо: http://jsbin.com/alESiBo/6/edit

код:

<div class="input-group">
  <span class="input-group-btn">
    <button class="btn btn-default" type="button">
      <i class="icon-upload-alt"></i>&nbsp;Upload
    </button>
  </span>
  <input id="fileField" class="form-control" name="fileField" type="file" />
</div>

Вывод:

IE 9.0.8112.16421

enter image description here

Chrome 31.0.1650.63 м

enter image description here

Версия IE с моментальным снимком:

enter image description here

ОТВЕТЫ

Ответ 1

В IE9 ваш код работает нормально. http://fiddle.jshell.net/XCN83/1/show/

Итак, убедитесь, что режим совместимости не включен. (см. красный круг в прикрепленном изображении)

Если нет, некоторые другие css, которые у вас есть, влияют на него, используйте инспектор инструментов dev, чтобы найти стили, применяемые к ящику ввода файла, и родители, которые работают над вами.

enter image description here

Ответ 2

То, что вы видите (серая часть), является частью "просмотра" части загрузки файла в IE9. Это "как раз то, что есть" для bootstrap css. Как показали другие ответы, если вам это не нравится, да, просто нужно взглянуть на свое собственное.

Добавьте это в свой тег заголовка, чтобы предотвратить дальнейшие несоответствия, хотя...

<meta http-equiv='X-UA-Compatible' content='IE=edge'/>

Наиболее распространенным является скрытие этого элемента управления (я согласен, что он всегда выглядит ужасно и непоследовательно) и "запускает" его из вашей собственной поддельной кнопки.

Множество отличных ссылок из других ответов.

Ответ 3

Как сказал Роб Седжвик в его ответе, это именно то, как элемент управления выглядит в IE, а стиль не разрешен.

Но... вы можете обмануть: сделать входной файл исчезнут и создать свой собственный поддельный вход. Затем перенаправляйте соответствующие события с помощью JS.

HTML

<div class="input-group">
  <span class="input-group-btn">
    <button class="btn btn-default" type="button">
      <i class="icon-upload-alt"></i>&nbsp;Upload
    </button>
  </span>
  <input id="fileField" class="form-control" name="fileField" type="file" />
  <span class="form-control form-control-overlay" id="fileFieldOverlay">Choose file</span>
</div>

CSS

.form-control[type="file"] {
  margin-bottom: -100%;
  opacity: 0;
}

.form-control-overlay {
  /* style, if you want */
  cursor: pointer;
}

Javascript

var fileFieldEl = document.getElementById("fileField");
var fileFieldOverlayEl = document.getElementById("fileFieldOverlay");

// On change of file selection, update display
fileFieldEl.onchange = function(ev) {
  // remove file path; it a fake string for security
  fileFieldOverlayEl.innerText = ev.target.value.replace(/^.*(\\|\/)/, '');
};

// Redirect clicks to real file input
fileFieldOverlayEl.onclick = function() {
  fileFieldEl.click();
};

Запустите код: http://jsbin.com/alESiBo/16/edit

Ответ 4

добавить еще один класс:

bootstrap.css:3296

.input-group {position: relative; display: table; border-collapse: separate; width: 100%;}

попробуйте это, возможно, это поможет вам.

Ответ 5

Я предлагаю использовать свой собственный CSS-код, чтобы придать такой же внешний вид в браузере и такое же поведение в браузере. Я использовал подобный подход для решения этой проблемы в моем проекте. Ниже приведены те же сведения, что и ссылка JSBIN для демонстрации в реальном времени.

Код HTML:

<!--Import button-->
    <div class="fileinput-button import-modal-select-file-btn" title="Import file">
        <!--Name of button -->    
        <span>Upload</span>
        <!-- Upload file control-->
        <input id="importFileUploadFileId" type="file" name="file" onchange="uploadFile(this);" />
        <!-- Any hidden field; Generally needed when upload button is part of form-->
        <input type="hidden" name="request" value="value"/>
    </div>

Код CSS (пожалуйста, настройте в соответствии с вашими потребностями):

.fileinput-button {
border-radius: 5px;
padding-left: 10px;
padding-right: 10px;
background-color: #e7e9eb;
border: 1px solid #454b59;
font-family: "Gill Sans","Gill Sans MT","Helvetica Neue",Helvetica,Arial,sans-serif;
color: #454b59;
font-weight: lighter;
font-size: 16px;
cursor: pointer;
overflow: hidden;
position: relative !important;
background-image: none;
height: 30px;
outline: none;
height: 28.5px;
line-height: 28.5px;
}


.fileinput-button input {
position: absolute;
top: 0;
right: 0;
margin: 0;
opacity: 0;
filter: alpha(opacity=0);
transform: translate(-300px, 0) scale(4);
font-size: 16px;
direction: ltr;
cursor: pointer;
}

.import-modal-select-file-btn {
width: 50px;
}

Ниже приведена прямая ссылка JSBIN для вашей справки. http://jsbin.com/EWIGUrEL/1/edit

Надеюсь, что это может помочь.