怎么解决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实现的，在我的浏览器里面却没有出现这种问题。但是它的实现代码我没有看懂。

杨魅力

浏览 1333回答 1

1回答

扬帆大鱼

before这个伪元素不要用display: block;默认的inline就行了。左和上的对齐要靠padding来实现，设置一个min-height来保证最低高度，行高是每一行的高度。我这边没有带桌面版本的ubuntu，打死不能复现啊。。。如果默认before一直为Inline都还是出现这个问题，再试试重置盒模型*, *:before {    box-sizing: border-box; }

随时随地看视频慕课网APP