为什么移动 Safari 会截断输入表单中的文本？答案

【问题标题】：Why does mobile Safari cut off the text in an input form?为什么移动 Safari 会截断输入表单中的文本？
【发布时间】：2015-10-29 21:33:42
【问题描述】：

为什么移动 Safari 上的输入表单内部有更多的填充并将文本推到右侧以使其被截断？

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

^ 桌面 Safari 网页输入表单 ^

^ 移动 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>'

【问题讨论】：

你试过这个-webkit-appearance: none;css-tricks.com/almanac/properties/a/appearance
是否有人对此查询有解决方案，我现在面临同样的问题。

标签： css forms web width mobile-safari

【解决方案1】：

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

只需使用padding: 0;

（移动 Safari 为输入字段添加默认填充）

【讨论】：