Ошибка ширины ввода текста в Mobile Safari? - PullRequest
Новая
       16

Ошибка ширины ввода текста в Mobile Safari?

12 голосов
/ 11 апреля 2011

Посмотрите на эти скриншоты:

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

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

У меня возникли проблемы с отображением ввода текста, как ожидалось, если для параметра установлено значение width: 100%. Текстовое поле простирается слишком далеко вправо, за отступом справа на первом снимке экрана и за правым полем div на втором снимке экрана.

Это ошибка в мобильном Safari? Если так, может кто-нибудь предложить обходной путь? Кажется, он отлично работает в других мобильных браузерах, а также в настольной версии Safari. Кажется, что проблема ограничена входными элементами, так как кажется, что элементы select имеют правильную ширину при стилизации точно таким же образом.

Заранее спасибо за любую помощь!

Вот код для первого скриншота: 

<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
{<br>
    padding-top: .5em;
    padding-bottom: .5em;</p>

<pre><code>border-left: 1px solid black;
border-bottom: 1px solid black;

padding-left: 0.5em;

}

.item .title { плыть налево; ширина: 25%; }

.item .content { плыть налево; ширина: 67%; }

.item. Подтверждение { плыть налево; ширина: 8%; }

.item .confirmation img { отступ слева: .3em; высота: 1.1em; }

.item hr { ясно: оба; видимость: скрытая; отступы: 0; поле: 0; }

.item select { ширина: 100%! важно; размер шрифта: 0,9em; }

. Элемент ввода { ширина: 100%! важно; размер шрифта: 0,9em; }

1 Ответ

32 голосов
/ 05 апреля 2012

Может это свойство на входах поможет вам? 

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