Question

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

两个输入的总高度（填充顶部+内容高度+填充底部）小于声明的高度（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，＆lt; input＆gt;的内容高度是30px - 16px - 16px - 1px - 1px = -4px。所以，没有空间来展示内容。

在* Chrome *中使用box-sizing：border-box时，为什么<input type =“text”/>的呈现方式与<input type =“password”/>不同

1 个答案: