下面这段代码在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实现的，在我的浏览器里面却没有出现这种问题。但是它的实现代码我没有看懂。
1 回答
扬帆大鱼
TA贡献1799条经验 获得超9个赞
before这个伪元素不要用display: block;默认的inline就行了。
左和上的对齐要靠padding来实现，设置一个min-height来保证最低高度，行高是每一行的高度。
我这边没有带桌面版本的ubuntu，打死不能复现啊。。。
如果默认before一直为Inline都还是出现这个问题，再试试重置盒模型
*, *:before { box-sizing: border-box;
}添加回答
举报
0/150
提交
取消