html文字占位不显示,html – 文本输入占位符不显示在IE和Firefox中

正如luke2012所述,当box-sizing：border-box;正在用于文本类型输入字段.但是,这仅在使用固定高度(例如Bootstrap框架)时出现,并且存在太多的顶部和底部填充.这不仅可以防止占位符文本显示,还可以在Firefox中输入文本.

我发现更好的解决方案是保持盒子大小：border-box;并替代删除顶部和底部填充,并将高度增加到您希望输入字段拥有的总高度(包括任何边框).

input[type="email"], input[type="password"], input[type="text"]

{

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

height: 42px; // Increase height as required

margin-bottom: 30px;

padding: 0 20px; // Now only left & right padding

}

这使事情更加一致,并且在诸如Bootstrap的框架上运行良好.

或者,您可以增加固定高度或设置高度：auto;并根据需要调整顶部和底部填充.