為什么移動Safari會截斷輸入表單中的文本？

Question

為什么移動Safari上的輸入表單內有更多填充，然后將文本推到右側，以致被截斷？

我將輸入字段的寬度設置為20px，這對於桌面Web來說足夠了，但在移動設備上則需要> 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;

（移動瀏覽器在輸入字段中添加了默認填充）