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

看看这些截图：

http://i.stack.imgur.com/1TFuj.png

http://i.stack.imgur.com/3fukT.png

当设置为“width：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>

这里是第二个代码(请注意,select元素的样式是完全相同的方式)是不被赋值的)：

<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
{
float：left;
宽度：25％;
}
.item .content
{
float：left;
宽度：67％;
}
.确认
{
浮动：左;
宽度：8％;
}
.item .confirmation img
{
padding-left：.3em;
身高：1.1em;
}
.item小时
{
清楚：两者;
能见度：隐藏;
填充：0;
保证金：0;
}
.选择
{
宽度：100％！重要;
font-size：0.9em;
}
.item输入
{
宽度：100％！重要;
font-size：0.9em;
}
border-left: 1px solid black;
border-bottom: 1px solid black;

padding-left: 0.5em;

解决方法

也许 this property的输入将帮助您？

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