ошибка в текстовом поле - IE

Я пытаюсь установить ширину 100% на текстовое поле, но он растягивает контейнер. Я проверил некоторые вопросы подобного типа, но, похоже, нет объяснений, почему проблема возникает. Я знаю, чтобы вручную установить свойства, но мне нужно выяснить, почему это происходит. и я должен сделать это, используя значение свойства 100% ..ошибка в текстовом поле - IE

<body> 
    <form id="form1" runat="server"> 
     <div style="border:1px solid gray;"> 
      <input type="text" style="width: 100%;" id="title"/> 

     </div> 

    <div> 
    <a href="#" id="postfile" style="float:left;">Post</a><span style="display:none; border:1px solid #ee1100; margin-left:10px; color:#cc1100" id="errormessage"></span> 
    </div> 

</form>

источник

2013-02-06 user1575229

вы используете _reset stylesheet_, если не пытаетесь это сделать – Muleskinner

Чтобы ответить на это, я бы нужно больше контекста, т.е. весь HTML-документ. В идеале вы должны явно задать ширину контейнера для управления шириной% своих детей, но я понимаю, что это не жизнеспособный подход. – bean

Контейнер не имеет указанной ширины. Можете ли вы предоставить больше контекста? – nnnnnn

Попробуйте использовать Box проклейки на вашем входе

<input type="text" style="width: 100%; box-sizing: border-box;" id="title"/>

Также наиболее кросс путь браузер:

<input type="text" style="width: 100%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;" id="title"/>

http://jsfiddle.net/zQXXh/

источник

2013-02-06 10:36:48 Omid

есть скрипка, проверьте это – Omid

Спасибо, Омид .. Не могли бы вы объяснить, почему это ... и что такое размер окна? – user1575229

Свойство выбора размера окна позволяет вам определить определенные элементы, чтобы они соответствовали определенной области , Просто взгляните на http://www.w3schools.com/cssref/css3_pr_box-sizing.asp – Omid

Добавить box-sizing:border-box. Причина, по которой она слишком широка, заключается в том, что в настоящее время для контента установлено значение 100% ширины, но добавление и граница добавляются.

источник

2013-02-06 10:32:49

Я верю, что вам также придется добавить 'padding-right: 2px;' в контейнер div, поскольку сумма горизонтальной границы входного элемента (слева + справа) равна 2px. – Muleskinner

Граница по умолчанию стиль из <input> в IE делает это идет вне контейнера div. Логический ввод - 100%, но граница по умолчанию добавляет к нему дополнительную ширину. Вы можете попробовать это добавить border:10px solid green; к вам <input> в любом браузере.

<input type="text" style="width: 100%; border:10px solid green;" id="title"/>

Это приведет к тому, что входной сигнал выходит за пределы контейнера div. Поэтому, когда вы применяете border:0 к <input> как:

<input type="text" style="width: 100%; border:0;" id="title"/>

Это будет помещается в контейнер. Надеюсь, это поможет.

источник

2013-02-06 10:59:15

Спасибо за ответ ... – user1575229

Да ... как было предложено Колинком, граница, граница и отступы не равны нулю для текстового поля. Таким образом, она охватывает 100% ширину. Таким образом, с помощью box-sizing: border-box любые прокладки или границы, указанные на элементе, выложены и вычерчены внутри этой указанной ширины и высоты

источник

2013-02-06 11:07:37 user2046210

Спасибо за ответ ... – user1575229

ошибка в текстовом поле - IE

ответ

Смежные вопросы