webkit 浏览器中输入元素的垂直填充无效
我无法为输入元素中的文本/占位符设置垂直/顶部填充。
以下代码可以在 IE/Firefox/Opera 中运行，但不能在 Safari/Chrome 中运行：
CSS:
input
{
border: 1px solid black;
height: 100px;
padding: 70px 25px 10px 25px;
width: 300px;
}
HTML:
<input type="text" placeholder="Enter text here"/>
webkit 开发人员工具按应有的方式显示指标，但文本仍然位于输入的中间。
类似的东西可能在这里（虽然没有答案）。
I am unable to set a vertical/top padding for the text/placeholder in input elements.
The following code will work in IE/Firefox/Opera, but not in Safari/Chrome:
CSS:
input
{
border: 1px solid black;
height: 100px;
padding: 70px 25px 10px 25px;
width: 300px;
}
HTML:
<input type="text" placeholder="Enter text here"/>
The webkit Developer Tools display the metrics as they should be, but the text is still in the middle of the input.
Something similar might be here (unanswered though).
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
刚刚测试了 Chrome 的奇怪行为。您可以将输入粘贴在 div 中并在其上使用填充吗？
Just tested that and its bizzare how Chrome behaves. Could you maybe stick the input in a div and use padding on that?
输入是内联元素。内联元素不接受垂直填充。
添加：
display:block到您的 CSS，然后您必须添加float:left并随后清除浮动。inputs are inline elements. Inline elements don't accept vertical padding.
add:
display:blockto your CSS, you will then have to addfloat:leftand clear your floats afterwards.我相信 Webkit 中没有办法设置垂直填充。
使用
height属性添加垂直内边距。您可能需要使用line-height或padding-top/padding-bottom使文本在浏览器中垂直居中。I believe there is no way to set vertical padding in Webkit.
Use the
heightproperty, to add vertical padding. You may need to useline-heightorpadding-top/padding-bottomto vertically center the text across browsers.