css - 当使用 box-sizing :border-box in *Chrome*, 时，为什么 <input type ="text"> 与 <input type ="password"> 呈现不同

Question

查看应用了相同 CSS 样式的 2 个输入，第一个是 type="text"，第二个是 type="password" Screenshot showing input padding & height

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

我已经修复了 padding-top/-bottom 值，但那是在尝试调试为什么密码字段不“工作”的长期斗争之后。我只是想知道为什么行为不同

链接到 JS Fiddle ，或查看 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，<input>的内容高度是30px - 16px - 16px - 1px - 1px = -4px。因此，没有显示内容的空间。