Webkit 占位符文本跳转答案

【问题标题】：Webkit placeholder text jumpsWebkit 占位符文本跳转
【发布时间】：2012-11-13 05:34:26
【问题描述】：

我有一个带有占位符的<input />。输入是定制设计的，即。 e.它没有边框、没有轮廓、自定义高度、自定义宽度、自定义背景颜色、自定义文本颜色以及具有特定字体大小和行高的自定义字体。该字体是使用引用 *.ttf 文件的 @font-face 导入的。

问题在于，当关注输入字段时，占位符文本会跳高约 2-3px，只是在模糊时跳回。

这里是输入字段的定义：

@font-face{
    font-family: SourceSansProExtraLight;
    src: url('../fonts/Source_Sans_Pro/SourceSansPro-ExtraLight.ttf');
}

#search_input{

    background-color: #f0f0f0;
    outline: none;
    border: none;
    padding: 0;
    margin: 0;

    width: 236px;
    padding-left: 12px;
    width: 224px; /* width (236) - padding-left */

    font-family: SourceSansProExtraLight;
    font-size: 30px;
    line-height: 30px;
    color: #5e5e5e;

    height: 52px;

}

这是一个演示问题的 GIF：

【问题讨论】：

标签： input webkit placeholder

【解决方案1】：

请检查您是否为 input:focus 选择器编写了任何可能导致问题的 css。如果您没有为 input:focus 编写任何 css，请为此编写 css 以解决问题。

【讨论】：

这帮助我解决了一些文本在输入框中跳转的问题。我定义了一些影响 input:focus 轮廓的 css，这就是罪魁祸首。

【解决方案2】：

使用 input[type="text"] 没有问题。如果高度和行高相等，我只有 input[type="number"] 有问题：

input[type="number"] {
    height: 30px;
    line-height: 30px; 
}

但如果我降低行高，效果就会消失：

input[type="number"] {
    height: 30px;
    line-height: 28px;
}

【讨论】：

【解决方案3】：

Chrome 为插入符号保留空间。

行高必须大于字体高度 1.11 个单位（在我的系统上）。

例子：

font-size = 30px
line-height = 30px * 1.11 = round(33,3px) = 33px

【讨论】：

【解决方案4】：

当输入有:focus 时尝试设置outline-offset: 0。这为我在 WebKit 上修复了跳跃占位符错误。我还设置了outline: none 并显示了自定义box-shadow，这可能是原因。

【讨论】：