怎么解决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实现的，在我的浏览器里面却没有出现这种问题。但是它的实现代码我没有看懂。
杨魅力浏览 1272回答 1
1回答
-
扬帆大鱼
before这个伪元素不要用display: block;默认的inline就行了。左和上的对齐要靠padding来实现，设置一个min-height来保证最低高度，行高是每一行的高度。我这边没有带桌面版本的ubuntu，打死不能复现啊。。。如果默认before一直为Inline都还是出现这个问题，再试试重置盒模型*, *:before { box-sizing: border-box; }
随时随地看视频慕课网APP
相关分类
JavaScript