3

私は<input />プレースホルダーを持っています。入力はカスタム設計されています。つまり、境界線、アウトライン、カスタムの高さ、カスタムの幅、カスタムの背景色、カスタムのテキストの色、および特定の font-size と line-height のカスタム フォントがあります。そのフォントは、*.ttf ファイルを参照する @font-face を使用してインポートされます。

問題は、入力フィールドに焦点を合わせると、プレースホルダー テキストが約 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 は次のとおりです。

プレースホルダー ジャンプ

4

4 に答える 4

0

キャレット用の Chrome 予約スペース。

行の高さは、フォントの高さよりも 1.11 単位大きくする必要があります (私のシステムでは)。

例：

font-size = 30px
line-height = 30px * 1.11 = round(33,3px) = 33px
于 2015-10-18T17:57:44.497 に答える