尽管使用了-moz-placeholder属性,但我的文本输入占位符拒绝在IE和Firefox中显示.如果您使用的是Firefox或IE,可以在此处的联系页面上查看.
有人可以请帮助我一直试图解决这个问题几周.我的代码示例如下:
input::-moz-placeholder, textarea::-moz-placeholder { color: #aaa; font-size: 18px; } input:-ms-input-placeholder, textarea::-ms-input-placeholder { color: #aaa; font-size: 18px; } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #aaa; font-size: 18px; }
Simon Watson.. 40
正如luke2012所述,当box-sizing: border-box;
在文本类型输入字段上使用时会发生这种情况.但是,这仅在使用固定高度时(例如在Bootstrap框架中)并且顶部和底部填充太多时才会发生.这不仅可以防止占位符文本显示,还可以在Firefox中输入文本.
我发现更好的解决方案是保持box-sizing: 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等框架上运行良好.
或者,您可以根据需要增加固定高度或设置height: auto;
并调整顶部和底部填充.