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

Posted 2023-03-05

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

【英文标题】：HTML Input cursor position issue in Chrome when value is empty

【发布时间】：2014-12-03 22:06:16

【问题描述】：

就在最近，我注意到 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);

【问题讨论】：

奇怪...我这里有同样的问题，我认为这是一个 chrome 错误

看这个codepen.io/leandroruel/pen/yjopx

是的，这绝对是 Chrome 38 中的一个错误。

似乎已在最新的 Chrome Canary 40 中修复。

这可能是这个错误的回归吗？ code.google.com/p/chromium/issues/detail?id=47284

【参考方案1】：

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

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

【参考方案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 虚拟机上。

【参考方案3】：

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

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

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

【参考方案4】：

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

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

【参考方案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% 将产生更多预期行为。

【讨论】：

将高度设置为您想要的（例如 50px），将行高设置为 100% jsfiddle.net/zxa8d0h7/1

答案是这样的

我不是说你错了。我澄清了一个观点并添加了一个小提琴（甚至对你的答案投了赞成票）。

@yar1 嘿，是的，谢谢，这很酷我只是感到困惑，因为我认为您基本上说的与我在答案中所说的相同！你的更重要=）

这个解决方案对我来说对 Chrome 没有积极影响

【参考方案6】：

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

http://jsfiddle.net/ddjj9wxc/

【讨论】：

我想知道这是否是正确的行为？我会认为 line-height:100% 会继承自输入父级？

@Le-roy 这可能与元素的显示属性有关。对于内联元素，你是对的， line-height 似乎是从最近的块父级继承的，但对于具有 display:block 或 inline-block （也是浮动元素）的元素 line-height 会影响元素本身。在这种情况下，我认为它可以工作，因为在 chrome 中，输入元素的默认显示值是 inline-block。我目前仅在 webkit 中应用了上述规则，以避免旧浏览器出现任何问题。

这对我有用，而接受的答案没有

@321zeno 我有点困惑.. 接受的答案是 add "line-height:100%" 怎么对你不起作用但同样的答案呢！实际上，接受的答案列出了 两个 选项，但是是的。

@Le-roy 你的答案有一些修改，我认为在我阅读它的时候它是不同的

【参考方案7】：

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

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

【讨论】：

有趣。你的小提琴不适合我。我想知道这是怎么发生的？

试试这支笔* [codepen.io/anon/pen/tkyzu]，我不知道为什么？？但它仍然有效

不幸的是，上面的解决方案对我来说也有同样的问题。

OK，在jsfiddle示例中仍然存在光标位置问题，因为HTML中留下了inline line-height。如果你删除它，光标位置会很好看。在最新版本中，Chrome 似乎将文本和光标居中而没有任何额外的行高或填充设置。

我仍然建议您删除小提琴中的内联行高样式，然后它看起来正确，@Le-roy 可以将其标记为正确答案。

【参考方案8】：

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

【讨论】：

如果你这样做，占位符会向下