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

Question

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

注意在顶部图像中，当输入为空时，光标在文本输入中太高了。

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

JSFiddle 来说明。可能需要 Google Chrome 版本：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

那些天我遇到了同样的问题，但只在 IOS 8.1 上，所以也许我的解决方案会对某人有所帮助。问题来自一个设置了转换 CSS 属性的 div 标签。我用下面的代码解决了这个问题：

#your-parent-div {
    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
}

Answer 2

在 2012 年，我做了一个 HTML5 画布网络应用程序，并使用 CSS3 属性来更改使用图像作为光标时的光标位置：

#canvas { cursor: url(../image/pen_red_ff0000.gif)0 20, auto; }

在 Firefox、Chrome/Chromium 和其他浏览器上开发我的项目时，它工作了几个月，但至少从 Chrome 38 开始，光标位置的变化被忽略了。我正在使用 Chromium Ubuntu 版本，今天，我已更新到 Chromium 40，即使重新启动并删除“.config/chromium”，该错误仍然存​​在。

Ubuntu 软件包的版本是“版本 40.0.2214.94 Ubuntu 14.04（64 位）”，但几天前我尝试了来自 https://download-chromium.appspot.com/ 的最新官方 Chromium Linux“版本 42.0.2287.0（64 位）”该错误没有出现。

我的网络应用程序在这里http://drawcode.eu/projects/connect-points/，您必须连接点，但在 Ubuntu 的 Chromium 上，我必须单击点中间下方的 20 个像素。这是一个光标位置问题，所以我认为我的问题与此线程有关。

有人可以确认这个错误并知道它是从什么时候真正修复的吗？ 请注意，我下载的最新官方 Chromium 是 42 版（不稳定）。我的 Ubuntu 的 Chromium 40 仍然存在错误，但 @Salmonface 说它已在版本 40 中修复 HTML Input cursor position issue in Chrome when value is empty

编辑：在 Debian 上，我也遇到了 Chromium 37（不是 38）的这个错误！该错误仍然存​​在于 Chrome beta（版本 41）上。这是一个小提琴http://jsfiddle.net/baptx/L0fmvs7a/

编辑 2：实际上 CSS3 光标位置错误出现在 Chromium 25 (https://commondatastorage.googleapis.com/chromium-browser-snapshots/index.html?prefix=Linux_x64/171003/) 中，它似乎已在 Chromium 42 (https://commondatastorage.googleapis.com/chromium-browser-snapshots/index.html?prefix=Linux_x64/313000/) 中修复，您可以自己尝试我的 HTML5 画布应用程序并查看 CSS3 光标位置不对。从 Chromium 25 到 Chromium 36（使用开发人员构建 261001 进行测试），我共享的 Fiddle 可以工作，但浏览器允许您在 div 上选择光标位置正确或错误的文本。从 Chromium 37（使用开发人员构建 271001 测试）到 Chromium 41，您无法在 Fiddle 上选择具有良好光标位置的文本。

该错误不仅存在于 GNU/Linux 平台上，它也出现在 Windows 8 虚拟机上。

Answer 3

我遇到了类似的问题。但我发现最好使用line-height 的数字而不是长度（px、em 或 rem）。也许使用以下代码可以解决此问题：

input[type="text"] {
  height: 46px;
  line-height: 1.1;
}

另外，上面的css可能需要搭配-webkit-appaearance: none才能达到想要的渲染效果。无论如何，这对我有用。

Answer 4

据我所知，还有另一种没有人提到的 hack。您可以使用@media 查询来查看 Chrome：

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    line-height: normal;
}

Answer 5

原因：

看起来这是 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% 将产生更多预期行为。

Answer 6

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

http://jsfiddle.net/ddjj9wxc/

Answer 7

我建议根本不要使用line-height，它可能不是正确的答案，但它对我有用（最新的 chrome）

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

Answer 8

将文本输入的 CSS 样式从 line-height: 46px 更改为 line-height: 1em 解决了该问题；但是我不确定为什么。