نص مركز رأسيا في عنصر الإدخال

Question

لدي عنصر الإدخال التالي (قمت بحذف السمات التي لم تكن ضرورية للمثال):

<input type="text" style="display: block; height: 40px; font-size: 14px; line-height: 40px"/>

في Chrome و Internet Explorer (ربما Opera أيضا)، سيتم تركيم أي نص داخل المدخلات رأسيا. ومع ذلك، يبدو أن فايرفوكس يتجاهل هذا الإعلان. إعداده إلى display: inline-block; بدلا من ذلك، أو باستخدام vertical-align: middle; ليس له أي تأثير في فايرفوكس.

لقد حاولت أيضا تحديد القوائم العلوية والسفلية 13px, ، والطول ل 14px, ، والتي (مجتمعة مع حجم الخط) ستؤدي إلى عنصر 40px طويل. هذا يعمل كما هو متوقع؛ باستثناء أي شخصيات مع ذيول (مثل جيم, س:, ج إلخ) قطعت في الأسفل.

أبحث عن حل متصفح عبر التحويل العظمي في صندوق الإدخال مع ارتفاع ثابت. سيكون لعنصر الإدخال أنماط تحريكها وتركيزها، لذلك تزوير التركيز من خلال وضع العنصر نفسه عموديا في 40px مساحة طويلة ليست حقا خيارا.

هتافات

Answer 1

لقد حاولت أيضا تحديد القنوات العلوية والسفلية إلى 13px، وارتفاعها إلى 14px، والتي ستؤدي (مقترنة بالحجم الخطي) إلى عنصر طوله 40 بكسل. هذا يعمل كما هو متوقع؛ باستثناء أي شخصيات مع ذيول (مثل G، Q، J ETC) يتم قطعها في الأسفل.

ماذا عن تعيين فقط الحشو الأعلى إلى 13px (وليس الجزء السفلي) ووضع الارتفاع إلى المساحة المتبقية، مثل هذا:

<input type="text" style="display: block; height: 27px; padding-top: 13px; font-size: 14px">

وهو يعمل كما هو متوقع في كل من فايرفوكس والكروم؛ لم أكن من الوصول إلى أي في الوقت الحالي، لكنني واثق من ذلك يعمل في IE أيضا.