Html 输入字段上的 CSS 文本缩进在您开始输入之前不会更新插入符号位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12046638/
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 text-indent on input field doesn't update the caret position until you start typing
提问by user1418227
When I use text-ident property in CSS, what I expect to see is when you focus into the text input area, the text cursor icon/caret will appear indented. But it appears as if it isn't indented until you type for first character. The only work around is to use left padding on the input element, but I want to avoid using padding because I am also setting a width and don't want to have to implement a padding fix for IE using an IE specific spreadsheet.
当我在 CSS 中使用 text-ident 属性时，我希望看到的是当您聚焦到文本输入区域时，文本光标图标/插入符号将缩进。但它看起来好像没有缩进，直到您键入第一个字符。唯一的解决方法是在输入元素上使用左填充，但我想避免使用填充，因为我也在设置宽度并且不想使用特定于 IE 的电子表格为 IE 实现填充修复。
This bug happens in Safari.
此错误发生在 Safari 中。
See below for images of what I'm talking about.
请参阅下面的图片，了解我正在谈论的内容。
On focus when there is no text, the text-ident doesn't affect the caret position:
在没有文本时聚焦，文本标识不会影响插入符号位置：
When you start typing, it indents correctly:
当您开始输入时，它会正确缩进：
After you type and then delete what you've typed, it displays what I want it to do from the beginning (indent the caret).
在您输入然后删除您输入的内容后，它会从一开始就显示我希望它执行的操作（缩进插入符号）。
HTML:
HTML：
<input type="text" />
CSS:
CSS：
input { text-indent: 10px; }
采纳答案by Andrew Kolesnikov
It's a confirmed WebKit bug that has recently been resolved https://bugs.webkit.org/show_bug.cgi?id=82688
这是一个已确认的 WebKit 错误，最近已解决https://bugs.webkit.org/show_bug.cgi?id=82688
Your version of Safari may be too old for this fix to be included.
您的 Safari 版本可能太旧，无法包含此修复程序。
Use padding-left instead.
请改用 padding-left。
回答by Chris
<style>
::-webkit-input-placeholder {text-indent:10px!important;}
:-moz-placeholder { text-indent:10px!important;}
::-moz-placeholder {text-indent:10px!important;}
:-ms-input-placeholder {text-indent:10px!important;}
</style>
This allows the text indent to focus indented, which I believe has been fixed in newer versions of webkit / safari. However, this fix should help you out with the older versions.
这允许文本缩进集中缩进，我相信这已在较新版本的 webkit/safari 中得到修复。但是，此修复程序应该可以帮助您解决旧版本。
Thanks
谢谢
