在 *Chrome* 中使用 box-sizing:border-box 时，为什么 <input type="text"> 的呈现方式与 <input type="password"> 不同答案

【问题标题】：When using box-sizing:border-box in *Chrome*, why does <input type="text"> render differently from <input type="password">在 *Chrome* 中使用 box-sizing:border-box 时，为什么 <input type="text"> 的呈现方式与 <input type="password"> 不同
【发布时间】：2014-06-15 20:12:11
【问题描述】：

查看应用了相同 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;
}

【问题讨论】：

小提琴是否应该显示它们之间的不同之处，因为它们在 Chrome 中看起来相同。
@j08691 第二个输入不应该看起来空白！我希望密码字形也可见。此外，这是在谷歌浏览器中，我用 Firefox 检查过它看起来很相似（就像你说的那样）。我已将此问题标记为“google-chrome”，但我应该更清楚地表明这是标题中特定于 chrome 的
在 Chrome 中它不是空白的。
i.imgur.com/22rlVhd.png
@j08691 d'oh：你又是对的：它在 Chromium (34.0.1847.116 Ubuntu) i.imgur.com/4mDwT2M.png 中是空白的。我在 Chrome (35.0.1916.153) 中打开，它看起来一样看起来我被 Chromium 虫子咬了。

标签： css google-chrome

【解决方案1】：

这是你的 CSS 的缺陷。

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

【讨论】：