怎么解决div[contenteditable]设置padding却没有效果？

下面这段代码在ubuntu/chrome53下面测试的时候会出现padding-left设置无效的情况，也就是鼠标没有距离div的左边border有5px的现象。 但是一旦开始输入文字，这个padding却又开始生效了。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    div {
        width:600px;
        border: 1px solid red;
        padding-left: 5px;
        line-height: 200%;
    }
        
    div:empty:before {
        content: attr(placeholder);
        display: block;
        color: #999;
    }
  </style>
</head>
<body>
  <div contenteditable="true" placeholder="输入用户名"></div>
</body>
</html>

请问应该怎么解决这个问题。ps: 知乎的评论框现在都是采用的div而不是testarea实现的，在我的浏览器里面却没有出现这种问题。但是它的实现代码我没有看懂。

补充

输入文字前。
图片描述

一旦输入文字后，又变成正常的了。
图片描述

javascript css

阅读 5.8k

4 个回答

before这个伪元素不要用display: block;默认的inline就行了。

左和上的对齐要靠padding来实现，设置一个min-height来保证最低高度，行高是每一行的高度。

我这边没有带桌面版本的ubuntu，打死不能复现啊。。。

如果默认before一直为Inline都还是出现这个问题，再试试重置盒模型

*, *:before {
    box-sizing: border-box;
}

Chersquwn

5781511

发布于
2016-11-30

这里不就是padding-left为5么

知乎貌似就是用css实现的，只不过是通过js移除class去掉:before

undefind_5

1.5k1296133

发布于
2016-11-30

楼主你要不换个思路，我也不知道你那ubuntu/chrome53到底是个什么（chrome版本？），你试试这样子：

<div style="padding:0 5px">
<div placeholder="写下你的评论…" data-input-box="true" aria-label="写下你的评论…" contenteditable="true" data-reactid=".0.7.1"></div>
</div>

我的意思是你不要纠结它的版本问题，你把那个padding——left效果加到data-input-box的父元素上，然后他的首行和光标都在默认位置（看上去光标和输入文字有了缩进效果，其实是外层父元素的padding效果）。不知道你明白我的意思没有？我没有试验，楼主你可以试试看看能行不能