HTML5占位符CSS填充
我已经看过这篇文章，并试图尽我所能改变我的占位符的填充，但唉，似乎它只是不想合作。
无论如何，这里是CSS的代码。 （ 编辑 ：这是从sass生成的CSS）
#search {
margin-top: 1px;
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
width: 220px;
}
#search form {
position: relative;
}
#search input {
padding: 0 10px 0 29px;
color: #555555;
border: none;
background: url('/images/bg_searchbar.png?1296191141') no-repeat;
width: 180px;
height: 29px;
overflow: hidden;
}
#search input:hover {
color: #00ccff;
background-position: 0px -32px;
}
这里是简单的html：
<div id="search">
<form>
<input type="text" value="" placeholder="Search..." name="q" autocomplete="off" class="">
</form>
<div id="jquery-live-search" style="display: block; position: absolute; top: 15px; width: 219px;">
<ul id="search-results" class="dropdown">
</ul>
</div>
</div>
很简单？ 由于某种原因，占位符处于关闭状态，但当您尝试输入输入字段时，文本是对齐的。 看起来你只能改变占位符的颜色（对于webkit ），但是如果我尝试编辑包含输入的填充，它会破坏输入的设计！ 拔出头发
以下是占位符和带有文本输入的输入字段的屏幕：
编辑 ：
现在我已经使用了这个jQuery插件。
它开箱即用，它修复了我的Chrome的问题。 我仍然想要发现问题所在（如果它与我的Chrome或某事有关）
我很确定这不是自从约翰卡特菲尔德转载它没有问题以来的风格，所以我希望有人能指出我正确的方向，为什么这发生在我身上（我的客户的铬）。如果John使用Windows，这可能是Chrome / OSX原生的）
我遇到了同样的问题。
我通过从输入中删除行高来修复它。 检查是否存在导致问题的线高度
我有类似的问题，我的问题是侧填充，解决方案是，文字缩进，我没有意识到文本缩进影响占位符的位置。
input{
text-indent: 10px;
}
如果您希望保持行高并强制占位符相同，则可以直接编辑自较新浏览器版本以来的占位符CSS。 这对我来说是个窍门：
input::-webkit-input-placeholder { /* WebKit browsers */
line-height: 1.5em;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
line-height: 1.5em;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
line-height: 1.5em;
}
input:-ms-input-placeholder { /* Internet Explorer 10+ */
line-height: 1.5em;
}