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

Question

我在Chrome中有一个输入type="date"字段和一个输入type="text"字段。输入日期字段比文本字段高2个像素。有人知道为什么会发生这种事吗？查看此页面后，无论样式如何，它都会出现。

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>

Answer 2

我知道这并不理想，但我最终只是为我的input[type="date"]和input设计了不同的padding属性。

input, select, textarea {
    padding: 3px 5px;
    /* Fix for input and select elements being different sizes */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
input[type="date"] 
{
    padding: 2px 5px;
}

请注意，我还考虑了select元素的高度不一致性，这是用box-sizing属性修复的。你可能也会遇到这种情况。