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

Question

看看这些屏幕截图：

https://i.sstatic.net/1TFuj.png

< a href="https://i.sstatic.net/3fukT.png" rel="noreferrer">https://i.sstatic.net/3fukT.png

我在渲染文本输入时遇到问题当设置为时如预期'宽度：100%'。文本框向右延伸得太远，超出了第一个屏幕截图中的右内边距，并超出了第二个屏幕截图中 div 的右边距。

这是移动 Safari 中的错误吗？如果是这样，有人可以建议解决方法吗？它似乎在其他移动浏览器和桌面版 Safari 中运行良好。该问题似乎仅限于输入元素，因为当以完全相同的方式设置样式时，选择元素似乎具有正确的宽度。

预先感谢您的任何帮助！

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

<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>

这是第二个屏幕截图的代码（注意样式完全相同的选择元素如何不受影响）：

 <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>

这是 CSS：

.item
{

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


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

padding-left: 0.5em;


 .item.title

​
{
    浮动：向左；
    宽度：25%；
}

 .item .内容
{
    浮动：向左；
    宽度：67%；
}

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

 .item .确认 img
{
    左内边距：.3em；
    高度：1.1em；
} .

项目小时
{
    明确：两者；
    可见性：隐藏；
    填充：0；
    保证金：0；
} .

项目选择
{
    宽度：100%！重要；
    字体大小：0.9em；
.item

输入
{
    宽度：100%！重要；
    字体大小：0.9em；
}

Answer 1

也许输入上的这个属性会对您有所帮助？

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