找回密码
 注册

[CSS] Microsoft Edge input/textarea text-indent placeholder 错位

php 发表于 2015/8/8 23:06 | 显示全部楼层 |阅读模式
Microsoft Edge中如果表单元素上面设置了text-indent,那么placeholder显示的内容会严重向右方偏移,和表单元素的文字初始位置不一致。解决方法是使用padding-left平替代text-indent.
配合box-sizing: border-box; 来防止input/textarea变宽。
  1. input#wxc{
  2.   text-indent: 2em;
  3. }
复制代码
修改以后的代码
  1. input#wxc{
  2.   padding-left: 2em;
  3.   box-sizing: border-box;
  4. }
复制代码
如果需要兼容其他浏览器的早期版本,则需要给box-sizing加上浏览器CSS前缀,如-moz-,-webkit-

手机版|轻松E站

轻松E站

快速回复 返回顶部 返回列表