问题描述
我使用 Slate Pro Regular 和 Slate Pro Bold 字体开发了一个网站。它在 Windows 中运行良好,但在 Mac 中,输入元素文本向上推。请查找屏幕截图以供参考 Input element in Windows 和 Alignment issue in Mac chrome
我在下面试过 How to vertically align text in input type="text"? 和 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>
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)