值为空时 Chrome 中的 HTML 输入光标位置问题

Question

就在最近，我注意到 Google Chrome 中的文本输入有显示问题，但仅当文本为空时才会出现。

请注意在顶部图像中，当输入为空时，光标在文本输入中的位置过高。

但是一旦我们输入一些文本，它就会自行更正:

JSFiddle 来说明。可能需要谷歌浏览器版本:38.0.2125.101 m

HTML:

<input name="tb_password" type="password" id="tb_password" class=" validate[required,custom[password]]" placeholder="Type your password here" autocomplete="off" style="
    margin: 0;
    line-height: 46px;
">

CSS:

input[type="text"], input[type="password"] {
width: 100%;
height: 46px;
line-height: 46px;
font-size: 11pt;
color: #555 !important;
text-indent: 15px;
border-top: solid 1px #c5c5c5;
border-left: solid 1px #c5c5c5;
border-bottom: solid 1px #dadada;
border-right: solid 1px #dadada;
background: #fff;
-webkit-box-shadow: inset 0px 1px 5px 0px rgba(0, 0, 0, .1);
box-shadow: inset 0px 1px 5px 0px rgba(0, 0, 0, .1);
}

Answer 1

原因:

看起来这是 Chromium 38 引擎中的回归错误。我可以在 Chrome 38.* 和 Opera 25.*(使用 Chromium 38)中重现。

报告的错误:

正如@JackieChiles 所指出的，它似乎是这个[已关闭] 错误的回归:https://code.google.com/p/chromium/issues/detail?id=47284

按照已关闭错误中的建议，我记录了一个新错误。 https://code.google.com/p/chromium/issues/detail?id=426802&thanks=426802&ts=1414143535

并且还引用了另一个报告的错误，该错误似乎突出显示了相同的错误，但未能以通用方式定义确切的问题。 https://code.google.com/p/chromium/issues/detail?id=394664

解决方法:

如上述其他答案中所述，解决方法是避免使用基于像素的 line-height 属性。例如，将 line-height:50px 换成 line-height:1em 或 line-height:100% 会产生更多预期行为。