Fehler bei der Breite von Texteingaben in Mobile Safari?

Question

Werfen Sie einen Blick auf diese Bildschirmfotos:

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

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

Ich habe Probleme mit der erwarteten Darstellung von Texteingaben, wenn sie auf "Breite: 100%" eingestellt sind. Das Textfeld erstreckt sich zu weit nach rechts, über die rechte Polsterung im ersten Screenshot und über den rechten Rand des div im zweiten Screenshot.

Ist dies ein Fehler im mobilen Safari? Wenn ja, kann jemand eine Umgehung vorschlagen? In anderen mobilen Browsern und auch in der Desktop-Version von Safari scheint es problemlos zu funktionieren. Das Problem scheint sich auf Eingabeelemente zu beschränken, da Auswahlelemente die richtige Breite zu haben scheinen, wenn sie auf genau dieselbe Weise gestaltet werden.

Vielen Dank im Voraus für jede Hilfe!

Hier ist der Code für den ersten 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>

Und hier ist der Code für die zweite (beachten Sie, wie die Select-Elemente, die genau die gleiche Art und Weise gestylt sind, sind nicht betroffen):

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

Und hier ist das 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;
}

Answer 1

Vielleicht diese Eigenschaft auf Eingaben helfen Ihnen?

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