在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

我建议使用您自己的自定义 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

希望它能有所帮助。