在IE9上裁剪带有输入组的浏览按钮

Question

使用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

Chrome 31.0.1650.63 m

带快照的IE版本

Answer 1

您的代码似乎在IE9中正常运行。 http://fiddle.jshell.net/XCN83/1/show/

因此，请确保未启用兼容模式。 （见附图中的红圈）

如果没有，你所拥有的其他一些css正在影响它，使用开发工具检查器查找应用于文件输入框的样式，并且它的父母一直在努力。

Answer 2

您所看到的（灰色部分）是IE9中文件上传的“浏览...”部分。这就是bootstrap css的“就是这样”。正如其他答案所表明的那样，如果你不喜欢这个，是的，只需要看看你自己做的。

在头标记中添加此内容以防止进一步不匹配...

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

最常见的是将此控件设置为隐藏（我同意它总是看起来很糟糕且不一致）并从您自己的假按钮“触发”它。

其他答案有很多很棒的链接。

Answer 3

就像Rob Sedgwick在his answer中所说的那样，这就是控件在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's 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

Answer 4

再添加一个类：

bootstrap.css:3296

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

尝试这可能会帮助你。

Answer 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

希望它可能会有所帮助。