date输入框与select下拉框高度不一致（非box-sizing原因）求助

问题原因排查 #

你遇到的高度不匹配是表单控件原生默认样式差异、样式属性不统一共同导致的，具体可按照以下步骤修复：

修复步骤 #

• 统一内边距单位：你当前代码中select的padding设置为0.5em，而input的padding设置为0.5rem，单位不一致会导致内边距计算结果不同，先将二者统一为相同单位（建议统一用0.5rem）。
• 移除浏览器原生控件默认样式：不同浏览器对select和日期输入框会自带默认渲染样式，导致高度偏移，给两个元素都加上appearance重置属性：

  select, input[type=date] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  

  如果你需要下拉箭头、日期选择图标，可以后续自行通过背景图添加。
• 统一对齐规则：你当前只给input设置了vertical-align: middle，select没有设置，行内块元素基线对齐规则不同也会导致视觉上高度错位，给select也加上vertical-align: middle属性。
• 固定高度避免自适应差异：不要只依赖min-height做高度控制，直接给两个元素设置相同的固定高度（比如height: 42px，可根据需求调整数值），彻底避免内容撑开高度不一致的问题。
• 清理冗余代码：你的代码中重复定义了两次box-sizing全局规则，删除其中一份即可，避免后续样式维护混乱。

调整后核心参考代码 #

/* 统一两个控件的基础样式 */
select, input[type=date] {
  width: calc(24.5% - 4px);
  height: 42px; /* 固定统一高度 */
  margin: 10px 0;
  padding: 0.5rem; /* 统一内边距单位 */
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: #fff;
  font-size: 16px;
  font-family: Courier, Arial, Helvetica, sans-serif;
  line-height: 1.2; /* 用相对行高替代固定14px，适配性更好 */
  cursor: pointer;
  vertical-align: middle; /* 统一对齐规则 */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

内容的提问来源于stack exchange，提问作者NickR1993