移动Safari文本输入宽度错误？-Java 学习之路

看看这些截图：

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>

这里是第二个代码（请注意选择元素的样式是完全相同的，并且不受影响）：

<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;
    width: 25%;
} 

 .item .content
{
    float: left;
    width: 67%;
} 

 .item .confirmation
{
    float:left;
    width: 8%;
} 

 .item .confirmation img
{
    padding-left: .3em;
    height: 1.1em;
} 

 .item hr
{
    clear: both;
    visibility: hidden;
    padding: 0;
    margin: 0;
} 

 .item select
{
    width: 100% !important;
    font-size: 0.9em;
} 

 .item input
{
    width: 100% !important;
    font-size: 0.9em;
}

1 回答

也许this property对输入有帮助吗？

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

回复于 2024-05-02T08:05:49+08:00

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

1 回答

相关问题