input - 为什么 Chrome 中输入类型 ="date"字段比输入类型 ="text"字段高 2 个像素？

Question

我有一个 input type="date"字段与 Chrome 中的 input type="text"字段并排。输入日期字段比文本字段高 2 个像素。有谁知道为什么会这样？查看后 this page ，无论样式如何，它似乎都会发生。

Answer 1

这可能不言而喻，但由于这里还没有提到它......在 date 上设置明确的高度和您想要匹配的其他输入，将使这不是问题。

只是花了很多时间研究这个问题，不幸的是还没有找到任何其他方法来解决它。

然后另一个问题出现了:似乎原生步进器不会自动将其自身与垂直中心对齐。

我尝试使用 display: flex; align-items: center;在输入上(没有影响)，但最后，使用 ::-webkit-inner-spin-button 直接针对微调器并申请 align-self: center;照顾它。

input[type="text"],
input[type="date"] {
  height: 2rem;
  display: flex;
  
  background: white;
  border: 2px solid blue;
  padding-left: .5rem;
  padding-right: .5rem;
}

input[type="date"]::-webkit-inner-spin-button {
  align-self: center;
}

<label>
  <span>Text</span>
  <input type="text">
</label>

<label>
  <span>Date</span>
  <input type="date">
</label>