关于div实现placeholder的一个不完美地方？
把鼠标放上去，鼠标位置并不是像真正的placeholder那样垂直在文字的中间。但是在div里面输入文字时有会跳转，如果不设置line-height(采用默认100%)就没有问题。
p.s: 描述可能不是很清晰，代码可以直接运行，拜托各位看一下，我的运行环境是Chrome53
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
[contenteditable]:empty:before {
content: attr(placeholder);
display: block;
// 这样设置line-height: normal可以解决问题，但是会导致输入的时候div突然变宽
// line-height: normal;
color: #999;
}
</style>
</head>
<body>
<div contenteditable="true" placeholder="输入用户名" style="width:800px; border: 1px solid red; line-height: 200%; padding:5px;"></div>
</body>
</html>
我通过设置line-height: normal解决了这个问题，但是在Chrome下又出现了一个新的问题，就是我一旦开始输入文字的时候，div会突然的变宽，拜托大神提供一个优雅的对于div实现placeholder的优雅方法。
达令说浏览 747回答 1
1回答
随时随地看视频慕课网APP
相关分类
JavaScript