Mobile Safari text-input-width-bug?

Werfen Sie einen Blick auf diese screenshots:

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

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

Ich habe Probleme damit Texteingaben zu erbringen als erwartet, wenn die Einstellung 'width: 100%'. Das Textfeld reicht zu weit nach rechts, vorbei an der rechts-Polsterung im ersten Bild und über den rechten Rand des div in dem zweiten screenshot.

Ist das ein bug in Safari (Mobil)? Wenn dem so ist, kann jeder jeden schlagen einen workaround? Es scheint gut zu funktionieren in anderen mobilen Browser und auch in der desktop-version von Safari. Das problem scheint beschränkt auf input-Elemente, Elemente auszuwählen, zu haben scheinen, die richtige Breite, wenn gestylt in exakt der gleichen Weise.

Vielen Dank im Voraus für jede Hilfe!!!

Hier ist der code für das erste Bild:

<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 Elemente auswählen, die sind gestylt, der genau die gleiche Weise, sind 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>

Und hier das CSS:


.item
{

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

 

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

padding-left: 0.5em;

 

 

}

 

 

.item .Titel
{
float: Links;
Breite: 25%;
}

 

 

.item .Inhalt
{
float: Links;
Breite: 67%;
}

 

 

.item .Bestätigung
{
float:Links;
Breite: 8%;
}

 

 

.item .Bestätigung img
{
Polsterung-Links: .3em;
Höhe: 1.1 em;
}

 

 

.Element hr
{
clear: sowohl;
Sichtbarkeit: versteckten;
Polsterung: 0;
Marge: 0;
}

 

 

.item select
{
Breite: 100% !wichtig;
schriftart-Größe: 0.9 em;
}

 

 

.Menüpunkt Eingabe
{
Breite: 100% !wichtig;
schriftart-Größe: 0.9 em;
}

 

Sieht es so aus (basierend auf der screen-shots), dass es Polsterung angewendet wird, um Ihre Eingabe Feld. 100% + Padding = mehr als 100%.
Es gibt padding für die div-zwei divs über dem container-element, in beiden Fällen. Mein Verständnis ist, dass ein div 'width: auto' innerhalb eines div mit padding-wäre die Breite des übergeordneten div-abzüglich der Polsterung, und ein element im inneren, das innere div mit einer Breite von 100% würde sollte 100% der Breite des child-div (Breite des übergeordneten div-abzüglich der Polsterung). Ist das richtig?
Ich schlage vor, dass Ihr INPUT-tag kann haben Polsterung auf Sie-entweder ein Standard-Polsterung oder Polsterung vielleicht vererbt von anderen CSS-irgendwo. Versuchen Sie den Wert 0 festlegen, um zu sehen, ob das das problem behebt.
Sieht aus wie Sie, trifft den Nagel auf den Kopf, der mobile safari scheint das hinzufügen einiger Polsterung, werden auf die standardformatvorlage für text-Eingaben. Vielen Dank für die Hilfe!

InformationsquelleAutor nw. | 2011-04-11

  1. 32

    Vielleicht diese Eigenschaft auf Eingänge der Ihnen dabei helfen kann?

    input[type="text"]{
   -moz-box-sizing:    border-box;
   -webkit-box-sizing: border-box;
    box-sizing:        border-box;
}
    Dies das problem behoben!!! Vielen Dank. +1
    Werden Sie sicher, dass Sie explizit festlegen, dass Ihr input-type-Attribut -- ansonsten ist dies möglicherweise nicht für Sie arbeiten.
    Man sollte wohl denken, die Anwendung dieser allgemein. Auch in der <form>, es könnten auch andere input-Typen "tel" oder "E-Mail". Auch, Entwickler Präfixe sind ziemlich tot - http://caniuse.com/#feat=css3-boxsizing
    Ich habe versucht box-sizing in ein Ipad 1 und es hat nicht funktioniert. Also ich habe -webkit-box-sizing: und das Präfix fest. Vielen Dank!

    InformationsquelleAutor Rustam

Schreibe einen Kommentar