Mac端Input元素文本垂直对齐异常问题求助

Hey there! I’ve run into similar cross-platform font rendering quirks before, so let’s get this input text alignment sorted out for your Mac users.

Why This Happens #

The core issue here is that Windows and macOS render custom fonts (like Slate Pro Regular/Bold) differently, especially when it comes to baseline alignment and how browsers calculate input element heights. The default Bootstrap-style height: calc(1.5em + .75rem + 2px) might not play nicely with Slate Pro’s inherent metrics on Mac, pushing the text upward.

Step-by-Step Fixes #

Let’s adjust your CSS to normalize rendering across both systems:

1. Override the fixed input height and rely on padding/line-height
   The calculated fixed height is forcing the text into an awkward space. Switch to height: auto so the input’s height adapts to the font, then tweak padding to maintain your desired size:

   .form-control {
     display: block;
     width: 100%;
     height: auto; /* Replace the rigid calc height */
     padding: .6rem .75rem; /* Adjust padding to match your original input size */
     font-size: 1rem;
     font-weight: 400;
     line-height: 1; /* Critical for aligning text to the font's baseline */
     color: #495057;
     background-color: #fff;
     background-clip: padding-box;
     border: 1px solid #ced4da;
     border-radius: .25rem;
     transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
     appearance: none; /* Strip browser default input styling that causes conflicts */
   }
   

2. Ensure consistent font family inheritance
   Double-check that the input properly inherits the Slate Pro font with a fallback to avoid browser defaults:

   .enroll-form-input.form-input input:not([type='radio']) {
     border: 1px solid #2b5795;
     font-family: 'SlatePro Regular', sans-serif; /* Add sans-serif fallback for safety */
     width: 100%;
     line-height: 1; /* Match the line-height from .form-control */
   }
   

3. Optional: Mac/WebKit-specific fine-tuning
   If you still see minor misalignment, add a media query to target WebKit browsers (Chrome/Safari on Mac) for subtle adjustments:

   @media screen and (-webkit-min-device-pixel-ratio: 0) {
     .enroll-form-input.form-input input:not([type='radio']) {
       padding-top: .65rem; /* Slight upward padding tweak for Mac */
       padding-bottom: .55rem;
     }
   }
   

Why This Works #

• height: auto lets the input’s height be determined by the font size + padding, eliminating the rigid calculated height that clashes with Slate Pro’s metrics.
• line-height: 1 ensures the text sits exactly on the font’s baseline, fixing the upward shift on Mac.
• appearance: none strips out browser-specific input styling that can interfere with alignment.

Test these changes on both Windows and Mac—your input text should now be vertically centered consistently across systems!

内容的提问来源于stack exchange，提问作者Anitha