下面这段代码在ubuntu/chrome53下面测试的时候会出现padding-left设置无效的情况，也就是鼠标没有距离p的左边border有5px的现象。 但是一旦开始输入文字，这个padding却又开始生效了。
4
498<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
p {
width:600px;
border: 1px solid red;
padding-left: 5px;
line-height: 200%;
}
p:empty:before {
content: attr(placeholder);
display: block;
color: #999;
}
</style>
</head>
<body>
<p contenteditable="true" placeholder="输入用户名"></p>
</body>
</html>请问应该怎么解决这个问题。ps: 知乎的评论框现在都是采用的p而不是testarea实现的，在我的浏览器里面却没有出现这种问题。但是它的实现代码我没有看懂。
输入文字前。
一旦输入文字后，又变成正常的了。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
before这个伪元素不要用
display: block;默认的inline就行了。左和上的对齐要靠padding来实现，设置一个min-height来保证最低高度，行高是每一行的高度。
我这边没有带桌面版本的ubuntu，打死不能复现啊。。。
如果默认before一直为Inline都还是出现这个问题，再试试重置盒模型
这里不就是padding-left为5么
知乎貌似就是用css实现的，只不过是通过js移除class去掉
:before楼主你要不换个思路，我也不知道你那ubuntu/chrome53到底是个什么（chrome版本？），你试试这样子：
我的意思是你不要纠结它的版本问题，你把那个padding——left效果加到data-input-box的父元素上，然后他的首行和光标都在默认位置（看上去光标和输入文字有了缩进效果，其实是外层父元素的padding效果）。不知道你明白我的意思没有？我没有试验，楼主你可以试试看看能行不能
用 你的代码 经过测试 ， 造成光标 不在指定的位置 ， 原因是 ：你的 p:empty:before 这个伪元素造成的， 我也同时看了知乎的评论的代码。 他的获得光标的时候，清空这个伪元素 就不会造成这个问题，我然后将你的 伪元素 去除后， 也就不会再有光标不到位的现象