更改按钮字体大小也会更改iOS上的宽度

Question

当我将字体大小更改为18pt时，按钮宽度也会更改。仅在iPhone上会发生这种情况，在Android或Windows上也能正常工作。

我尝试过：-webkit-appearance：无； -webkit-box-sizing：边框框; font-size-adjust：无； ！important宽度，将它们混合并改为使用asp：button。没有任何帮助。

.mainbtn {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    font-weight: bold;
    font-size: 18pt;
    border-radius: 0;
    position: relative;
    z-index: 3;
    width: 39px !important;
    height: 39px;
    display: block;
    background-color: transparent;
    border: 2px solid transparent !important;
    table-layout: fixed;
    font-size-adjust: none;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

    .mainbtn.green {
        border: 2px solid lightgreen !important;
    }

<button ID="Button5" runat="server" class="mainbtn green" />

这就是它的外观。

这就是在iPhone上的外观。 （更宽）

您可以自己在http://sudoku.somee.com/上签出

Answer 1

尝试为iOS设备添加-webkit-text-size-adjust: unset;。完成了！

.mainbtn {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    font-weight: bold;
    font-size: 0.6em;
    border-radius: 0;
    position: relative;
    z-index: 3;
    width: 39px !important;
    height: 39px;
    display: block;
    background-color: transparent;
    border: 2px solid transparent !important;
    table-layout: fixed;
    font-size-adjust: none;
    -webkit-text-size-adjust: unset;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

    .mainbtn.green {
        border: 2px solid lightgreen !important;
    }

<button ID="Button5" runat="server" class="mainbtn green" >GO</button>