HTML当值为空时，在Chrome中输入光标位置问题 [英] HTML Input cursor position issue in Chrome when value is empty

问题描述

刚刚我注意到在Google Chrome中出现显示问题的文本输入，但只有当文本为空时。

Just recently I have noticed out text inputs having a display issue in Google Chrome but only when the text is empty.

请注意在顶部图片中，如果输入为空，则在文本输入中光标太高。

Notice how in the top image, when the input is empty, the cursor is too high within the text input.

我们键入一些文本，它自己纠正：

But once we type some text it corrects itself:

JSFiddle 来说明。可能需要Google Chrome版本：38.0.2125.101 m

JSFiddle to illustrate. May require Google Chrome version: 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);
}

推荐答案

原因：

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

Cause:

Looks like this is a regression bug in the Chromium 38 engine. I can reproduce in Chrome 38.* and Opera 25.* (which uses Chromium 38).

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

As pointed out by @JackieChiles it appears to be a regression of this [closed as obselete] bug: https://code.google.com/p/chromium/issues/detail?id=47284

如建议关闭的bug，我已经记录了一个新的。 https://code.google.com/p/chromium/问题/详细？id = 426802& thanks = 426802& ts = 1414143535

As suggested in the closed bug, I have logged a new one. https://code.google.com/p/chromium/issues/detail?id=426802&thanks=426802&ts=1414143535

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

And have also referenced another reported bug which appears to highlight the same bug, yet fails to define the exact issue in a generic way. https://code.google.com/p/chromium/issues/detail?id=394664

使用基于像素的 line-height 属性。例如，将 line-height：50px 切换到 line-height：1em 或 ：100％会产生更多的预期行为。

As detailed in other answers above the workaround is to avoid using a pixel-based line-height attribute. For example swapping line-height:50px to line-height:1em or line-height:100% will yield more expected behaviour.

这篇关于HTML当值为空时，在Chrome中输入光标位置问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！