Mobile Safari text input width bug?

问题

Take a look at these screenshots:

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

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

I am having trouble getting text inputs to render as expected when set to 'width: 100%'. The text box extends too far to the right, past the right padding in the first screenshot and past the right margin of the div in the second screenshot.

Is this a bug in mobile Safari? If so, can anyone suggest a workaround? It seems to work fine in other mobile browsers and also in the desktop version of Safari. The problem seems limited to input elements, as select elements seem to have the proper width when styled in the exact same way.

Thanks in advance for any help!

Here's the code for the first screenshot:

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

And here's the code for the second (notice how the select elements, which are styled the exact same way, are unafflicted):

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

And here's the 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:

Maybe this property on inputs will help you?

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

来源：https://stackoverflow.com/questions/5615980/mobile-safari-text-input-width-bug

标签

css

mobile

webkit

mobile-website