为什么移动Safari会以输入形式切断文本？

Question

为什么移动版Safari上的输入表单内部有更多填充，并将文本向右推，以便它被切断？

我将输入字段的宽度设置为20px，这对于桌面网络来说是足够的，但在移动设备上它需要> 26px。

^桌面Safari Web输入表单^

^移动iOS Safari输入表单^

CSS

.phone-input {
    width: 20px;
    text-align: center;
    font-size: 16px !important;
    height: 1.75em;
    //border: 0;
    outline: 0;
    background: transparent;
}

HTML

'<div class="phone-field">'+
     '(<input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="-" autofocus="autofocus"><input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="-"><input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="-">)   '+
     '<input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="-"><input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="-"><input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="-"> - '+
     '<input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="-"><input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="-"><input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="-"><input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="-">'+
'<\/div>'

Answer 1

我花了几个小时才弄清楚，但是解决方法很简单：

只需使用padding: 0;

（移动浏览器在输入字段中添加了默认填充）