边缘输入占位符未与文本对齐 [英] Edge input placeholder not aligned with text

问题描述

在所有其他浏览器中，我输入的text类型的占位符从光标闪烁的地方开始.但是，在Microsoft Edge中，占位符文本显示在光标之前.有什么办法可以解决这个问题?

In all other browsers, the placeholder of my input of type text starts where the cursor is flickering. However, in Microsoft Edge, the placeholder text appears ahead of the cursor. Is there any way to fix this?

预期结果:

边缘结果:

推荐答案

似乎我找到了答案(我早在这里问到了...)

It seems I found the answer (the sooner I asked it here...)

问题在于text-indent属性.在Edge中，它以某种方式将光标移动到占位符不等距离处.使用

The problem is with the text-indent property. Somehow in Edge it moves the cursor at an inequal distance to the placeholder. Using

padding-left: 10px;

代替

text-indent: 10px;

解决问题.这是在两种情况下的有效方法: jsfiddle

solves the isse. Here's a working fiddle with both scenarios: jsfiddle

这篇关于边缘输入占位符未与文本对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！