单击输入类型文本

Question

在IE中，如果我选择输入类型文本，并且在我从选择下拉列表中选择一个选项后，选择框的宽度会变大。但是如果我第一次选择下拉列表而不是选择的宽度框将正常显示。我不明白为什么在将鼠标放在输入框上后，选择的多点击宽度会变大。有人可以帮我解决一下吗？

这是我的代码：

 <div class="tbl">
    <div class="cell">
        <label>Name</label>
        <input type="text" name="name" placeholder="Your name herve..."/>
    </div>
    <div class="cell">
        <label>Options</label>
        <select class="">
          <option>Mustard</option>
          <option>Ketchup</option>
          <option>Relish</option>
        </select>
    </div>
</div>

.tbl {
  display: inline;
  width: 600px;
 }
.cell {
 display: inline-block;
 padding: 5px;
 width: 50%;
}
input, select, textarea{
display: block;
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
input {
padding: 0 5px;
height: 30px;
line-height: 30px;
}
select {
height: 30px;
line-height: 30px;
}

JSFIDDLE