Html Firefox和Chrome上下拉菜单的输出不一致

我有一个非常简单的下拉菜单来选择银行名称。 代码如下：

<select id = "bankoption">
<option value="bank1">bank1</option>
<option style = "display:none" value ="bank4">bank4</option>
<option style = "display:none" value ="bank27">bank27</option>
<option style = "display:none" value ="bank22">bank22</option>
<option style = "display:none" value ="bank19">bank19</option>
<option style = "display:none" value ="bank21">bank21</option>
<option style = "display:none" value ="bank15">bank15</option>
<option style = "display:none" value ="bank23">bank23</option>
<option style = "display:none" value ="bank18">bank18</option>
<option style = "display:none" value ="bank26">bank26</option>
<option style = "display:none" value ="bank10">bank10</option>
<option style = "display:none" value ="bank17">bank17</option>
<option style = "display:none" value ="bank20">bank20</option>
<option style = "display:none" value ="bank16">bank16</option>
<option style = "display:none" value ="bank9">bank9</option>
<option style = "display:none" value ="bank11">bank11</option>
<option style = "display:none" value ="bank13">bank13</option>
<option style = "display:none" value ="bank3">bank3</option>
<option style = "display:none" value ="bank7">bank7</option>
<option style = "display:none" value ="bank25">bank25</option>
<option value ="bank5">bank5</option>
<option value ="bank28">bank28</option>
</select>

根据上述代码bank1、bank5和bank28应显示在下拉列表中，而不是其他。令人惊讶的是，虽然firefox呈现出预期的效果，但chrome只显示了bank1选项

这是所附的图片

---

为什么浏览器呈现方式不同？如果我以错误的方式做事，那么正确的方式是什么？

所有预期值都显示在下拉框中。然而，在chrome中，所有隐藏值都被分解到列表的长度中。如果单击微小的向下箭头，可以滚动到其他选项。另外需要注意的是，我可以通过点击上下箭头来选择隐藏值，而框是焦点。这可能是您不想要的。

但为什么浏览器之间存在这种不一致性呢。这是一个我们应该向chrome报告的bug吗？我真的不会称之为bug。所有浏览器呈现网页的方式略有不同。这就是为什么在所有不同的浏览器中进行测试是一件非常好的事情。