php 输入输入字段时的 CSS 光标行大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3843408/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS cursor line size when entering an Input field
提问by tmartin314
I have an image as the background for an input field. I can set the line-height and font-size easily but when you click inside the input, the cursor line is way outside the background image.
我有一个图像作为输入字段的背景。我可以轻松设置行高和字体大小，但是当您在输入内部单击时，光标行位于背景图像之外。
Is there a CSS statement (Is that you call them?) that controls this?
是否有一个 CSS 语句（你叫他们？）来控制这个？
回答by Randy the Dev
You're probably using line-heightto display the text in the input as vertically centered. However, it is also the culprit of your issue. Try experimenting with paddingsettings of the input instead, while leaving the line-heightset to normal.
您可能使用line-height将输入中的文本显示为垂直居中。但是，它也是您问题的罪魁祸首。尝试尝试使用padding输入设置，同时将line-height设置保留为normal。
回答by cjohansson
Problem with using padding is that it is displayed inconsistently in different browsers while line-height in input text areas are displayed equally in IE7, IE8, IE9, Safari, Chrome, Firefoxand Opera. It's seems like you have to choose between input cursor or input text vertical alignment.
使用填充的问题是，它而在输入文本区域行高在同样显示的不一致在不同的浏览器显示IE7，IE8，IE9，Safari，Chrome，Firefox和Opera。似乎您必须在输入光标或输入文本垂直对齐之间进行选择。
回答by Khan
Yes, line-height.
是的，行高。
Try:
尝试：
input {height: 28px; font-size: 10px; padding: 7px 5px;}
回答by JoshD
The post Vertically aligning the text cursor (caret?) in an input box with jQuery, Javascript or CSSmay help you.
使用 jQuery、Javascript 或 CSS 在输入框中垂直对齐文本光标（插入符号？）的帖子可能对您有所帮助。
It seems that your padding size affects the cursor size and position.
您的填充大小似乎会影响光标大小和位置。
回答by AlexC
Will be good if we have the code , you also can try
如果我们有代码就好了，你也可以试试
background:url("yourimage") right top no-repeat;
font-size:12px;
padding:5px 5px;
line-height:normal;
depends of your images size
取决于你的图像大小
回答by Dr I
Using a line-height: normalor a line-height:inheritdid the trick on my side.
Thanks for your answers guys.
使用 aline-height: normal或 aline-height:inherit对我有用。谢谢你们的回答。
回答by Ben
the text in input tag can be vertical centered automatically, do not use line-height on it.
input 标签中的文本可以自动垂直居中，不要在其上使用 line-height。
