Css 移动Safari文本输入宽度错误？

请看以下屏幕截图：

当设置为“宽度：100%”时，我无法按预期渲染文本输入。文本框向右延伸太远，在第一个屏幕截图中超出了右填充，在第二个屏幕截图中超出了div的右边缘

这是移动Safari中的一个bug吗？如果是这样的话，有人能提出解决办法吗？它似乎在其他移动浏览器和Safari的桌面版本中也能正常工作。问题似乎仅限于输入元素，因为当以完全相同的方式设置样式时，select元素似乎具有适当的宽度

提前感谢您的帮助

以下是第一个屏幕截图的代码：

<div style="padding-left: 1em; padding-right: 1em;">
    <div style="font-size: 1.2em;">
       Username:
    </div>
    <div>
        <input type="text" style="width: 100%; font-size: 1.1em;" id="tbUsername" name="tbUsername">
    </div>
</div>

}

.项目.标题 { 浮动：左； 宽度：25%； }

.项目.内容 { 浮动：左； 宽度：67%； }

.项目.确认 { 浮动：左； 宽度：8%； }

.项目.确认img { 左侧填充：.3em； 高度：1.1米； }

.项目人力资源 { 明确：两者皆有； 可见性：隐藏； 填充：0； 保证金：0； }

.项目选择 { 宽度：100%！重要； 字号：0.9em； }

.项目输入 { 宽度：100%！重要； 字号：0.9em； } 也许输入会对您有所帮助

---

根据屏幕截图，似乎有填充应用于输入字段。100%+Padding=大于100%。在这两种情况下，div上都有Padding，即容器元素上方的两个div。我的理解是，带填充的div中的'width:auto'div将是父div的宽度减去填充，而该内部div中宽度为100%的元素将是父div的子div宽度减去填充的100%。这是正确的吗？我建议您的输入标记上可能有填充，或者是默认填充，或者是从其他CSS继承的填充。尝试将其设置为0，看看这是否解决了问题。看起来你一针见血，mobile safari似乎为文本输入的默认样式添加了一些填充。谢谢你的帮助！请确保显式设置您的输入类型属性，否则这可能不适用于您。您可能应该考虑。即使在网络中，也可能有其他输入类型，如电话或电子邮件。此外，开发人员的前缀几乎已经过时了——我曾在iPad1中尝试过框大小调整，但没有成功。所以我添加了-webkit-box-sizing:前缀修复了它。非常感谢！

 <div class="item">
    <hr />
      <div class="title">Group Name</div>
      <div class="content">
         <asp:TextBox ID="tbGroupName" runat="server">
         </asp:TextBox>
      </div>
      <div class="confirmation">
         <img alt="" src="../Graphics/Check-icon.png" runat="server" id="imgConfirmGroupName"/>
     </div>
  <hr />
</div>

.item
{

    padding-top: .5em;
    padding-bottom: .5em;


border-left: 1px solid black;
border-bottom: 1px solid black;

padding-left: 0.5em;

input[type="text"]{
   -moz-box-sizing:    border-box;
   -webkit-box-sizing: border-box;
    box-sizing:        border-box;
}