为什么 Chrome 中的 input type="date" 字段比 input type="text" 字段高 2 个像素？答案

【问题标题】：Why is the input type="date" field 2 pixels taller than input type="text" fields in Chrome?为什么 Chrome 中的 input type="date" 字段比 input type="text" 字段高 2 个像素？
【发布时间】：2014-10-02 19:25:41
【问题描述】：

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

【问题讨论】：

如果有人能提供使它们高度相等的解决方案，那将有很大帮助。
能否请您发布您附加到这些字段的任何 CSS？
这个链接，webdesign.about.com/od/examples/l/…，显示它没有样式，以便更容易看到。
这是另一个更简单的例子：jsfiddle.net/1cc4whfj/1

标签： input textfield styling datefield

【解决方案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>

【讨论】：

【解决方案2】：

我知道这不太理想，但我最终只是为 myinput[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;
}

请注意，我还考虑了选择元素的高度不一致，这已通过 box-sizing 属性修复。你也可能遇到这种情况。

【讨论】：

这将使输入更小非 WebKit 浏览器。