IE11とChromeの表示ずれを修正したい

前提・実現したいこと

発生している問題・エラーメッセージ

input要素に

.form-control {
width: auto;
display: inline-block;
vertical-align: middle;
}

とCSSで記述したところchromeでは親要素内に収まるのですが、IE11だとはみ出してしまいます。
IE11で収まるようにするにはどうすればよいのでしょうか？

###追記

IEは仕様なので変えれず。フレームワークはBootstrap3を使用しています。

該当箇所のHtml

<table class="table table-bordered">
    <tr>                                                                                         
        <td class="col-xs-2">コード番号</td>                                                  
        <td class="col-xs-2">                                                                    
            <input type="text" class="form-control" />                                           
        </td>                                                                                    
        <td class="col-xs-2">氏名</td>                                                   
        <td class="col-xs-6">                                                        
            <label class="col-xs-1 control-label" for="">姓</label>                    
            <div class="col-xs-5">                                                               
                <input type="text" class="form-control" id="" />                                 
            </div>                                                                               
            <label class="col-xs-1  control-label" for="">名</label>                   
            <div class="col-xs-5">                                                               
                <input type="text" class="form-control" id="" />                                 
            </div>                                                                               
        </td>                                                                                    
    </tr>                                                                                        
</table>

x_x

2018/07/03 03:20

これだけでは原因を探すのは困難なので、再現するHTMLも提示してもらえるでしょうか？

Orlofsky

2018/07/03 03:35

IEは使わせない、って選択肢も。 https://doda.jp/d-c-b/article/180130.html

m.ts10806

2018/07/03 04:34

折角Bootstrap使っているのにわざわざ独自定義で崩してたら意味がないのでは。

yoshinavi

2018/07/04 00:23

input要素（text属性）にリセットCSSを掛ければ良いのでは？

行動規範の内容に同意します

回答1件

tableを使うといずれおさまらなくなります。
インラインフォームにしたいのだと思うのでこれで。

HTML
1<form class="form-inline">
2    <div class="form-group">
3        <label for="">コード番号</label>
4        <input type="text" class="form-control" id="" />
5    </div>
6    <div class="form-group">
7        氏名
8        <label class="control-label" for="">姓</label>
9        <input type="text" class="form-control" id="" />
10        <label class="control-label" for="">名</label>
11        <input type="text" class="form-control" id="" />
12    </div>
13</form>