Ошибка загрузки текста в браузере Safari?

Взгляните на эти скриншоты:

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 { плыть налево; ширина: 25%; }

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

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

.item.confirmation img { padding-left:.3em; высота: 1.1м; }

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

.item select { ширина: 100%! important; font-size: 0.9em; }

.item input { ширина: 100%! important; font-size: 0.9em; }

код >

Ответ 1