Webkit占位符文本跳跃

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

问题是，当专注于输入字段时，占位符文本跳跃大约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演示该问题：

Placeholder Jump

来源

2012-11-25 arik

请检查是否有写输入的任何CSS：重点选择可能导致问题。如果你不写任何CSS输入：焦点，写的CSS来解决这个问题。

来源

2013-04-25 07:19:46 saifur

这帮助我解决了一些文本在输入框内跳动的问题。我定义了一些影响输入大纲的css：焦点，这是罪魁祸首。 – JayD3e

输入[type =“text”]没有问题。我的问题仅与输入[类型=“号码”]如果高度和线高度等于：

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

但如果我降低线高度的影响在前看不见：

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

来源

2015-09-09 09:05:12 jzilg

铬预留插入空间。

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

实施例：

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

来源

2015-10-18 17:57:44 kirill

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

来源

2016-01-21 20:56:38 iano

Webkit占位符文本跳跃

回答

相关问题