HTML5占位符的CSS填充
我已经看到这个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('http://img.dovov.combg_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>
很简单？ 由于某种原因占位符处于closures状态，但是当您尝试inputinput字段时，文本是alignment的。 看来你只能改变占位符的颜色（对于webkit ），但是如果我尝试编辑包含input的填充，它会破坏input的devise！ 拔出头发
以下是占位符和input字段的屏幕文字input：
编辑 ：
现在我已经使用了这个jQuery插件 。
它开箱即用，解决了我的问题。 我仍然想发现问题是什么（如果它与我的铬或某事有关）
我很确定这不是自从John Catterfeld转载以来没有问题的风格，所以我希望在那里有人可以指出我为什么会发生这种情况（我的客户的铬）。如果John使用的是Windows，这可能是Chrome / OSX本地的）
我得到了同样的问题。
我通过从input中删除行高来修复它。 检查是否有一些lineheight导致问题
如果你想保持你的行高，并强制占位符相同，你可以直接编辑自较新的浏览器版本的占位符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;
为我工作;）
我有类似的问题，我的问题是边填充，解决scheme是，文本缩进，我没有意识到文本缩进影响占位符的位置。
input{ text-indent: 10px; }
我有一个问题，这只是在Internet Explorer中出现。 input字段是风格
height:38px; line-height:38px;
不幸的是在IE中，最初的占位符不在正确的位置。 但是当我点击字段，然后离开这个领域，占位符出现在正确的位置。
我的解决scheme是设置：
line-height:normal;
删除线条的高度确实使您的文本与占位符文本alignment，但它不能正确地解决您的问题，因为您需要适应您的devise这个缺陷（这不是一个错误）。 添加垂直alignment也不会做交易。 我没有尝试过所有浏览器，但在Safari 5.1.4中无法正常工作。
我听说过这个jQuery修复，这不是跨浏览器的占位符支持（jQuery.placeholder），但对于样式占位符，但我还没有find它。
同时，您可以parsing到此页面上的表格，其中显示不同的浏览器支持不同的样式。
编辑：find插件！ jquery.placeholder.min.js为您提供了完整的样式function和跨浏览器支持。
设置line-height: 0px; 在Chrome中为我修复它
我已经创build了一个小提琴使用您的截图作为背景图像和剥离额外的标记，它似乎工作正常
http://jsfiddle.net/fLdQG/2/ （需要webkit浏览器）
这对你有用吗？ 如果没有，你可以用你的确切的标记和CSS来更新小提琴吗？
我注意到这个问题，现在我更新了os到最新的稳定版本（9.0.597.94），所以这是一个Chrome的错误，希望将被修复。
我甚至不想尝试解决这个问题，只是等待修复。 这只是意味着更多的工作把它拿出来。
占位符不受line-height影响， padding在浏览器上不一致。
我发现了另一个解决scheme。
VERTICAL-ALIGN 。 这可能是唯一的工作，但尝试，而不是许多CSS代码行。
删除行高或使用填充设置…它在所有浏览器中工作
我在John Catterfeld的博客上find了解决这个问题的答案。
… Chrome（v20-30）实现了几乎所有的样式，但有一个主要的注意事项 – 占位符样式不会改变input框的大小，所以请保持清除行高和填充顶部或底部之类的东西。
如果你正在使用line-height或者padding，你将会对结果占位符感到沮丧。 到目前为止，我还没有find解决办法。
