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

时间:2014-10-09 04:52:49

标签: html css google-chrome html-input

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

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

Cursor issue in Chrome

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

Password input

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);
}

8 个答案:

答案 0 :(得分:35)

原因:

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

报告错误:

正如@JackieChiles所指出的那样,它似乎是这个[关闭为obselete]错误的回归: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:1emline-height:100%会产生更多预期行为。

答案 1 :(得分:8)

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

http://jsfiddle.net/ddjj9wxc/

答案 2 :(得分:6)

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

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

答案 3 :(得分:0)

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

答案 4 :(得分:0)

还有另一个黑客,没有人提到,因为我可以看到。您可以使用@media查询来查看Chrome:

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

答案 5 :(得分:0)

我遇到了类似的问题。但我发现最好使用line-height而不是长度(px,em或rem)的数字。也许使用以下代码解决了这个问题:

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

另外,也许上面的css需要与-webkit-appaearance: none配对才能获得所需的渲染效果。无论如何,这对我有用。

答案 6 :(得分:0)

2012年,我创建了一个HTML5画布Web应用程序,并使用CSS3属性在将图像用作光标时更改光标位置:

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

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

Ubuntu软件包的版本是&#34;版本40.0.2214.94 Ubuntu 14.04(64位)&#34;但是几天前我尝试了最新的官方Chromium Linux&#34;版本42.0.2287.0(64位)&#34;来自https://download-chromium.appspot.com/并且没有出现错误。

我的网络应用程序在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测试版(第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 I共享工作,但浏览器允许您在具有良好或错误光标位置的div上选择文本。从Chromium 37(使用开发人员版本271001测试)到Chromium 41,您无法在小提琴上选择具有良好光标位置的文本。

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

答案 7 :(得分:0)

那些日子我遇到了同样的问题,但仅限于IOS 8.1,所以也许我的解决方案会帮助某人。问题来自于设置了转换CSS属性的div标签。我用以下代码解决了这个问题:

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