css - 在输入文本跨浏览器中对齐文本

Question

我有一个简单的：

<input type="text" placeholder="search .." value="" id="search"/>

我刚刚添加了一些cs规则，例如：

#search{
padding:2%;
text-indent:1%;
width:30%;
}

但是当我在不同的浏览器（如 FF/Chrome）中尝试相同的输入时，我看到了一些错误，例如在 chrome 中，输入内的文本行高是不同的，当焦点在输入内时，占位符仍然保留，而在 FF 上一切正常并且当我专注于输入时占位符淡出...任何好的规则/规则来修复所有（几乎所有）浏览器的行高和文本缩进和占位符淡出？

Answer 1

Chrome 中的一项功能是占位符文本不会在焦点上消失，而只会在输入时消失。如果您希望覆盖它，您需要使用 JavaScript（这几乎违背了 的想法placeholder）。

您披露的任何设置都不会更改行高。由于默认值不同，它可能因浏览器而异。

该text-indent属性仅适用于块容器。要在左侧设置间距，这似乎是这里的想法，请使用padding-left，最好使用em单位。使间距取决于元素的宽度是不可靠的，特别是如果该宽度设置为相对于可用宽度。