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

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 单位。使间距取决于元素的宽度并不可靠，尤其是当该宽度设置为相对于可用宽度时。