javascript - 关于div实现placeholder的一个不完美地方？

把鼠标放上去，鼠标位置并不是像真正的placeholder那样垂直在文字的中间。但是在p里面输入文字时有会跳转，如果不设置line-height(采用默认100%)就没有问题。

p.s: 描述可能不是很清晰，代码可以直接运行，拜托各位看一下，我的运行环境是Chrome53

我通过设置line-height: normal解决了这个问题，但是在Chrome下又出现了一个新的问题，就是我一旦开始输入文字的时候，p会突然的变宽，拜托大神提供一个优雅的对于p实现placeholder的优雅方法。

补充

facebook.com的评论框采用的也是p实现placeholder，并且设置line-height: 140%，并没有出现任何的异常，但个人水平太低了，没有看懂实现。