css - 如何在mac中对齐输入元素文本

Question

我使用 Slate Pro Regular 和 Slate Pro Bold 字体开发了一个网站。它在 Windows 中运行良好，但在 Mac 中，输入元素文本向上推。请查找屏幕截图以供参考 Windows 中的输入元素和 Mac chrome 中的对齐问题

我在下面尝试 了如何在输入类型=“文本”中垂直对齐文本？和 https://css-tricks.com/forums/topic/vertical-align-on-text-input/

请任何人帮助我解决 Mac 中的输入元素对齐问题。

.container {
    max-width: 1040px;
    margin: 0 auto;
}
.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.form-input {
    margin-bottom: 10px;
    font-size: 16px;
    font-family: 'SlatePro Bold';
    color: #565656;
}

.form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    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;
}

.enroll-form-input.form-input input:not([type='radio']) {
    border: 1px solid #2b5795;
    font-family: 'SlatePro Regular';
    width: 100%;
}

<section class="enroll-doctor">
        <div class="container">
        <div class="row form-center">
                    <div class="col-md-8 col-sm-12">
                        <div class="form-input enroll-form-input">
                            <label for="licensefname">License first name</label>
                            <input type="text" class="form-control" name="License_First_Name__c" id="licensefname" placeholder="*John" value="" maxlength="100" data-parsley-required="true" data-parsley-required-message="*License first name required" data-parsley-pattern="/^[a-zA-Z]+(([',. -][a-zA-Z ])?[a-zA-Z]*)*$/g" data-parsley-pattern-message="*Invalid License first name">

                        </div>
                    </div>
                    <div class="col-md-4 col-sm-12">
                        <div class="form-input enroll-form-input">
                            <label for="licenselname">License last name</label>
                            <input type="text" class="form-control" name="License_Last_Name__c" id="licenselname" placeholder="*Smith" value="" maxlength="100" data-parsley-required="true" data-parsley-required-message="*License last name required" data-parsley-pattern="/^[a-zA-Z]+(([',. -][a-zA-Z ])?[a-zA-Z]*)*$/g" data-parsley-pattern-message="*Valid license last name required">

                        </div>
                    </div>
                </div>
        </div>
 </section>       

标签： csscss-selectorsfont-facewebfonts