把鼠标放上去，鼠标位置并不是像真正的placeholder那样垂直在文字的中间。但是在p里面输入文字时有会跳转，如果不设置line-height(采用默认100%)就没有问题。
p.s: 描述可能不是很清晰，代码可以直接运行，拜托各位看一下，我的运行环境是Chrome53
1
515<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
[contenteditable]:empty:before {
content: attr(placeholder);
display: block;
// 这样设置line-height: normal可以解决问题，但是会导致输入的时候p突然变宽
// line-height: normal;
color: #999;
}
</style>
</head>
<body>
<p contenteditable="true" placeholder="输入用户名" style="width:800px; border: 1px solid red; line-height: 200%; padding:5px;"></p>
</body>
</html>我通过设置line-height: normal解决了这个问题，但是在Chrome下又出现了一个新的问题，就是我一旦开始输入文字的时候，p会突然的变宽，拜托大神提供一个优雅的对于p实现placeholder的优雅方法。
facebook.com的评论框采用的也是p实现placeholder，并且设置line-height: 140%，并没有出现任何的异常，但个人水平太低了，没有看懂实现。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
不用 line-height，直接设置上下的 padding 不行吗？
https://jsfiddle.net/u4r7vnvr/