尽管使用了-moz-placeholder属性,但我的文本输入占位符拒绝在IE和Firefox中显示.如果您使用的是Firefox或IE,可以查看
on the contact page here.
有人可以帮助我一直在试图弄清楚这几个星期.我的代码示例如下：
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;
}
解决方法
正如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的框架上运行良好.
