问题
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 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);
}
回答1:
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).
Reported Bug/s:
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
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
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
Workaround:
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.
回答2:
Adding line-height:100%seems to fix the issue for us:
http://jsfiddle.net/ddjj9wxc/
回答3:
i suggest don't use line-height at all, it may not be the proper answer but its working for me (latest chrome)
Updated fiddle http://jsfiddle.net/efgq1svz/11/
回答4:
Changing the CSS style on the text input from line-height: 46px to line-height: 1em resolves the issue; however I am uncertain as to why.
回答5:
There is another hack that no one have mentioned as I can see. You could use a @media query to check out Chrome:
@media screen and (-webkit-min-device-pixel-ratio: 0) {
line-height: normal;
}
回答6:
I encountered the similar issue. But I found it's better to use number for line-height instead of length(px, em or rem). Maybe using following code fix this problem:
input[type="text"] {
height: 46px;
line-height: 1.1;
}
Plus, maybe the css above need to be paired with -webkit-appaearance: none for the desired rendering effect. Anyway, this works for me.
回答7:
In 2012, I made an HTML5 canvas web app and used a CSS3 property to change the cursor position when using an image as cursor:
#canvas {
cursor: url(../image/pen_red_ff0000.gif)0 20, auto;
}
It worked for months when developing my project on Firefox, Chrome/Chromium and other browsers but since at least Chrome 38, the cursor position change was ignored. I'm using the Chromium Ubuntu version and today, I've updated to Chromium 40 and the bug is still here even after reboot and deleting ".config/chromium".
The version from Ubuntu packages is "Version 40.0.2214.94 Ubuntu 14.04 (64-bit)" but a few days ago I tried the latest official Chromium Linux "Version 42.0.2287.0 (64-bit)" from https://download-chromium.appspot.com/ and the bug did not appear.
My web app is here http://drawcode.eu/projects/connect-points/, you have to connect points but on Chromium from Ubuntu, I have to click 20 pixels under the middle of the points. It's a cursor position issue so I think my problem is related to this thread.
Can someone confirm having the bug and know since when it's really fixed? Note that the latest official Chromium I've downloaded is version 42 (not stable). My Chromium 40 from Ubuntu still has the bug but @Salmonface said it was fixed in version 40 HTML Input cursor position issue in Chrome when value is empty
Edit: On Debian, I had this bug with Chromium 37 (not 38) too! The bug is still here on Chrome beta (version 41). Here is a Fiddle http://jsfiddle.net/baptx/L0fmvs7a/
Edit 2: In fact the CSS3 cursor position bug appeared in Chromium 25 (https://commondatastorage.googleapis.com/chromium-browser-snapshots/index.html?prefix=Linux_x64/171003/) and it seems fixed in Chromium 42 (https://commondatastorage.googleapis.com/chromium-browser-snapshots/index.html?prefix=Linux_x64/313000/), you can try by yourself my HTML5 canvas app and see that the CSS3 cursor position is wrong. From Chromium 25 to Chromium 36 (tested with developer build 261001), the Fiddle I shared works but the browser allows you to select text on a div with a good or wrong cursor position. From Chromium 37 (tested with developer build 271001) to Chromium 41, you can't select text with the good cursor position on the Fiddle.
The bug is not GNU/Linux platform only, it also appears on a Windows 8 virtual machine.
回答8:
I had the same issue those days but only on IOS 8.1, so maybe my solution will help somebody. The issue came from a div tag which had set a transform CSS property. I solve the problem with the following code:
#your-parent-div {
-webkit-transform: none;
-moz-transform: none;
-o-transform: none;
}
来源：https://stackoverflow.com/questions/26270582/html-input-cursor-position-issue-in-chrome-when-value-is-empty