Html 单击“输入类型文本”后，为“选择多个”下拉列表呈现奇怪的IE渲染

在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;
}

名称
选择权
芥末
番茄酱
喜欢
.tbl{
显示：内联；
宽度：600px；
}
.细胞{
显示：内联块；
填充物：5px；
宽度：50%；
}
输入、选择、文本区域{
显示：块；
宽度：100%；
框大小：边框框；
-moz框大小：边框框；
-webkit框大小：边框框；
}
输入{
填充：0 5px；
高度：30px；
线高：30px；
}
挑选{
高度：30px；
线高：30px；
}

---

即使从小提琴中删除了所有自定义格式，同样的效果也很明显。看起来像是一个浏览器错误。有没有解决这种IE错误的方法？不知道，我第一次看到它。试着研究一下其他人是否遇到过类似的问题，也许检查一下官方的Edge bug/issue tracker（）2019，我也遇到了同样的问题。