ios - css 输入数字字段在某些版本的 ios 上呈现奇怪

Question

输入数字字段在 ios 上无法正确呈现。数字在底部被截断。它适用于某些 ios 版本，但不适用于其他版本。我卡住了，请帮忙

input[type=submit] {
    text-align: center;
}

.page_q3 input[type="number"] {
    height: 91px;
    width: 110px;
    color: #464356;
    font-family: "Source Sans Pro";
    font-size: 82px;
    font-weight: 600;
    text-align: center;
    border: none;
    border-bottom: 2px solid #464356;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

<div class="page_q3">

    <div class="div_minus"><img src="<?=$templateDir?>/images/minus.jpg" class="minus" data-quantity="minus" data-field="<?=$inputName?>" /> </div>

    <div class="div_number"><input type="number" id="<?=$inputName ?>" name="<?=$inputName?>" value="<?=$_SESSION[$inputName]?>" placeholder="0" /> </div>

    <div class="div_plus"><img src="<?=$templateDir?>/images/plus.jpg"
    class="plus" data-quantity="plus" data-field="<?=$inputName?>" /> </div>
</div>

它应该是什么样子 https://ibb.co/y8msSpL

实际情况 https://ibb.co/rkbyPF5

Answer 1

您可能想尝试删除 iOS 默认添加的 border-radius 和 padding:

.page_q3 input[type="number"] {
    -webkit-border-radius: 0; 
    border-radius: 0;
    padding: 0;
}