我在xCode上的Safari模拟器上开发移动网站并在Safari的检查器中进行调试时遇到了一个奇怪的问题。字体大小始终指定为20或有时25 px,但计算的样式总是大约9px或一些奇怪的分数,如8.345624px。我无法弄清楚这是从哪里来的。下面是我的样式表中应用于该p标签的所有样式的图片,以及下面的计算样式。我无法理解为什么Safari会这样做。
编辑:更多细节。如果我制作29或30px,字体大小将神奇地准确。但是20px之后的任何事情都会被计算到9px。 Chrome不会重现这个问题。
HTML:我说的是signup-label
类
<div class="ios-account-details-2 slide-group">
<p class="signup-label">What's your birthday?</p>
<div class="birthday-flexWrapper">
<select class='newUserBirthMonth'>
<option disabled selected>Month</option>
<option value='January'>January</option>
<option value='February'>February</option>
<option value='March'>March</option>
<option value='April'>April</option>
<option value='May'>May</option>
<option value='June'>June</option>
<option value='July'>July</option>
<option value='August'>August</option>
<option value='September'>September</option>
<option value='October'>October</option>
<option value='November'>November</option>
<option value='December'>December</option>
</select>
<input class='completeProfileField birthDayField' maxlength="2" placeholder="DD" onfocus="this.placeholder = ''" onblur="this.placeholder='DD'"></input>
<input class='completeProfileField birthYearField' maxlength="4" placeholder="YYYY" onfocus="this.placeholder = ''" onblur="this.placeholder='YYYY'"></input>
</div>
<p class="signup-label">What's your gender?</p>
<select class='newUserGender'>
<option disabled selected>Gender</option>
<option value='2'>Female</option>
<option value='1'>Male</option>
<option value='3'>Custom</option>
</select>
<input class='newUserGenderMore completeProfileField' style='display: none;' placeholder='Custom'/>
<button class='login-next login-button red-gradient completeSignUp normalLogin' id="completeSignUpButton" disabled style="border-radius: 3px;">Complete Sign Up</button>
</div>