Input Webkit占位符文本跳转

我有一个带有占位符的

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

问题是，当聚焦于输入字段时，占位符文本会跳高约2-3倍，但会跳回模糊

以下是输入字段的定义：

@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演示该问题：

---

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

使用input[type=“text”]没有问题。 只有当高度和线条高度相等时，输入[type=“number”]才有问题：

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

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

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

---

Chrome为插入符号保留空间

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

例如：

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

---

当输入具有焦点时，尝试设置

轮廓偏移量：0

。这为我修复了WebKit上的跳跃占位符错误。我还设置了

outline:none

，并显示了一个自定义的

框阴影，这可能是原因。
这帮助我解决了一个问题，即一些文本在输入框内跳转。我定义了一些css，它们影响了输入的轮廓：焦点，这就是罪魁祸首。