我已经看过这个post并尝试了一切我可以改变占位符的填充但是唉，似乎它只是不想合作。
无论如何，这是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 plugin。
它开箱即用，它修复了我的chrome问题。我还是想揭开问题所在（如果它与MY chrome有什么关系）
我很确定这不是风格，因为John Catterfeld没有任何问题地重现它，所以我希望那里的人仍然可以指出我正确的方向，为什么这发生在我身上（我的客户的铬也是如此。所以如果John正在使用Windows，这可能是Chrome / OSX原生的）
我遇到了同样的问题。
我通过从输入中删除行高来修复它。检查是否存在导致问题的线高度
占位符不受line-height的影响，padding在浏览器上不一致。
我找到了另一个解决方案。
VERTICAL-ALIGN。这可能是它唯一有效的时间，但尝试相反并解决了许多CSS代码行。
删除行高或使用填充设置...它在所有浏览器中都有效
我在John Catterfeld's blog找到了解决这个问题的答案。
... Chrome（v20-30）实现了几乎所有的样式，但有一个重要的警告 - 占位符样式不会调整输入框的大小，所以要保持线条高度和填充顶部或底部之类的东西。
如果您使用行高或填充，您将对结果占位符感到沮丧。到目前为止，我还没有找到解决方法。
如果要将占位符文本向右移动并将光标留在空白区域，则需要在占位符属性的开头添加空格：
<input type="email" placeholder=" Your email" />
我有类似的问题，我的问题是侧边填充，解决方案是，文本缩进，我没有意识到文本缩进影响占位符侧位置。
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;
}
line-height: normal;
为我工作;）
我有一个问题，它出现在Internet Explorer中。输入字段已设置样式
height:38px;
line-height:38px;
不幸的是，在IE中，初始占位符似乎不在正确的位置。但是当我点击该字段然后离开此字段时，占位符出现在正确的位置。
我的解决方案是设置：
line-height:normal;
删除行高确实会使您的文本与占位符文本对齐，但它无法正确解决您的问题，因为您需要根据此缺陷调整您的设计（这不是错误）。添加vertical-align也不会成功。我没有在所有浏览器中尝试过，但它确实无法在Safari 5.1.4中使用。
我听说过jQuery修复，这不是跨浏览器占位符支持（jQuery.placeholder），但是对于样式占位符，但我还没有找到它。
在此期间，您可以解析为the table on this page，它显示不同浏览器对不同样式的支持。
编辑：找到插件！ jquery.placeholder.min.js为您提供完整的样式功能和跨浏览器支持。
设置line-height: 0px;在Chrome中为我修复了它
我用你的屏幕截图作为背景图片创建了一个小提琴并剥离了额外的标记，它似乎工作得很好
http://jsfiddle.net/fLdQG/2/（需要webkit浏览器）
这对你有用吗？如果没有，你能用你的确切标记和CSS更新小提琴吗？
当我将os x上的Chrome更新到最新的稳定版本（9.0.597.94）时，我注意到了这个问题，所以这是一个Chrome错误，希望能够修复。
我很想不试图解决这个问题而只是等待修复。这只是意味着需要做更多的工作。