入力のプレースホルダの問題の調整

Google Chromeや他のブラウザで入力（型検索）に関する問題に直面しました。入力のプレースホルダの問題の調整

<input type="search" placeholder="Search">

とCSS：

input { 
    height: 30px; 
    font-size: 16px; 
}

JSFiddle Example基本的なHTMLコードに見てみてください。問題は、プレースホルダが一部のブラウザでも垂直に配向されていないということです。

Google Chromeの（V 55.0.2883.87メートル。）：

Mozilla Firefoxの（。V 45.0.2）：

のInternet Explorer（V 11.576.14393.0。）：

Opera（v。 42.0.2393.94）：

しかし、それはに（私はそれが表示されるようにしたいと）正しく表示されています：

エッジ（V 38.14393.0.0）：。

Safari（Windows版5.1.7 7534.57.2）：

私はそれを真ん中に置いてうれしいです、これを達成するのを手伝ってください。ありがとうございました！

UPD：

私が試した：CSSをリセット

。
行の高さを設定します。
パディングを設定します。
:: - webkit-input-placeholderの高さ/行の高さを設定するセレクタ。

出典

2017-01-08 Mike

CSSをリセットしようとしましたか？ [正規化する。css]（https://necolas.github.io/normalize.css/）などがあります。 [更新されたフィドル]（https://jsfiddle.net/rjuub4mf/1/） – Quinox

@Quinox返信いただきありがとうございます！はい、私はすでに試して、結果は同じです。 – Mike

プレフィックス付きのプレースホルダを[この例]（https://css-tricks.com/almanac/selectors/p/placeholder/）と同じようにターゲティングするとどうなりますか？ – Quinox

は、CSSにline-heightを追加：あなたはパディングを使用しているため

input { 
    line-height:30px; 
    height: 30px; 
    font-size: 16px; 
    padding: 1px 0; 
}

は、行の高さを変更します。

出典

2017-01-08 16:41:51 bulldozer

ありがとうございますが、問題は解決しません。誤解を招いて申し訳ありません。私はソースコードからパディングを削除しました。パディングなしでは問題は同じです。 – Mike

これをCSSで追加してみてください。 input :: webkit-input-placeholder {} https://jsfiddle.net/d0rfbbLm/1/そしてこれをチェックしてください：http：//stackoverflow.com/questions/4982045/html5-placeholder-line-height-in-webkit – bulldozer

残念ながら、それは問題を解決していません。 Google Chromeのどのバージョンをお使いですか？ – Mike

font-familyに問題がある可能性があります。今日私はAndroidで同じ問題を解決するのに6時間を費やしました。最終的にこれはフォント "HelveticaNeueCyr"の問題でした。フォントには、Androidデバイス上では、cssで修正できないギャップしかありません。

私はArialに変更して修正しました。

出典

2018-01-12 15:45:59 Ilyasnake

入力のプレースホルダの問題の調整

答えて

関連する問題