HTML当值为空时,在Chrome中输入光标位置问题

Question

就在最近,我注意到文本输入在Google Chrome中存在显示问题,但仅在文本为空时才显示.

请注意,在顶部图像中,当输入为空时,光标在文本输入中过高.

但是一旦我们输入了一些文字,它就会纠正自己:

JSFiddle来说明.可能需要谷歌Chrome版本:38.0.2125.101米

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)中重现.

报告错误/ s:

正如@JackieChiles指出的那样,它似乎是这个[关闭为obselete]错误的回归:https://code.google.com/p/chromium/issues/detail？ id = 47284

正如已关闭的bug中所述,我已经记录了一个新的.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%将产生更多预期的行为.

Answer 2

添加line-height:100%似乎可以解决我们的问题:

http://jsfiddle.net/ddjj9wxc/

Answer 3

我建议不要使用line-height,它可能不是正确的答案,但它为我工作(最新的铬)

更新小提琴 http://jsfiddle.net/efgq1svz/11/