Webkit占位符文本跳转

Question

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

问题在于，当聚焦于输入字段时，占位符文本会跳跃大约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演示此问题：

Answer 1

请检查您是否已写入任何输入的CSS：焦点选择器可能导致问题。如果你没有为输入写任何css：focus，为此写css来解决问题。

Answer 2

输入[type =“text”]没有问题。 如果高度和线高相等，我的问题只有输入[type =“number”]：

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

但如果我减少行高，效果就会消失：

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

Answer 3

Chrome用于插入符号的预留空间。

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

示例：

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

Answer 4

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