在 *Chrome* 中使用 box-ssize：border-box 时，为什么 <input type= "text" > 的呈现方式与 <input type= "passwo

Question

看一下应用了相同CSS样式的2个输入，第一个是type="text"，第二个是type="password"屏幕截图显示输入填充&高度

两个输入的总高度(padding-top + content-height + padding- bottom)都小于声明的高度(30px)，但是，文本输入使其内容可见。密码输入看起来为空(并且没有显示光标)。

我已经固定了padding-top/-bottom值，但这是经过长时间的努力，试图调试为什么密码字段不"工作"。我只是想知道为什么行为不同

链接到JS提琴，或者看看HTML + CSS:

HTML:

<input type="text" value="hello"/>
<input type="password" value="hello"/>

CSS:

* {
    box-sizing: border-box;
}
textarea, input[type="text"], input[type="password"], input[type="datetime"],       input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"] {
    height: 30px;
    line-height:30px;
    display:inline-block;
    vertical-align: middle;
}
textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"],     input[type="search"], input[type="tel"], input[type="color"] {
  padding: 16px 11px 16px 11px !important;
  font-size:14px !important;
  color:#333 !important;
  border: 1px solid black !important;
}

Answer 1

这是你的CSS的缺陷。

根据你的CSS， 的内容高度为30px - 16px - 16px - 1px - 1px = -4px。因此，没有空间显示内容。