日期选择下拉列表中的未对齐选项（Firefox）

Question

在Firefox中，此日期选择下拉列表包含错误选项。见下图：

有关如何使选项排列的任何提示？

此处的CSS：

.dob-selects-container {
  display: block;
  -moz-box-sizing: border-box;
  float: left;
  min-height: 30px;
  margin-left: 2.12766%;

  :nth-child(1) {
    width: 120px;
    display: inline-block
  }

  :nth-child(2) {
    width: 60px;
    display: inline-block
  }

  :nth-child(3) {
    width: 80px;
    display: inline-block
  }
}

Answer 1

如果您只是使用:nth-child()指定样式规则，则它将适用于所有匹配元素。

您已为使用子选择器的前3个孩子指定了display:inline-block，因此他们将像文本一样坐在彼此旁边。 March被拉下来，因为它在同一行中没有任何可用空间。

如果您尝试仅为<select>元素应用它，请尝试

select:nth-child(1) {
 width: 120px;
 display: inline-block
}