Safari不会让字体大小超过9px,计算样式总是小于样式表

时间:2017-02-16 18:31:51

标签: html css safari

我在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>

My stylesheet/user rules

The computed styles

0 个答案:

没有答案