css: проблема с шириной и заполнением ввода в IE

У меня проблема с шириной полей ввода [текст] в IE, все версии.

У меня есть div с явно установленной шириной 250px. В этом div у меня есть текстовое поле ввода с шириной, равной 100%. Этот ввод также имеет внутренний левый отступ 10px.

В IE он отображает ширину как 100% + 10px. Я не могу понять, как ограничить ширину контейнера.

Изначально эта проблема возникала во всех браузерах, но ее очень легко исправить в FF, Safari и Chrome, добавив max-width:100%. IE6/7 не поддерживают это, в то время как IE8 поддерживает, но также добавляет отступы к ширине.

Я понимаю, что блочная модель IE включает границы и поля в свои расчеты ширины, поэтому, учитывая это, я все еще не могу понять, как это обойти.

Я также пытаюсь найти лучшее решение, чем просто установить ширину ввода на 240 пикселей с отступом, потому что в этой форме есть разные входы, контейнеры которых различаются по размеру, и я хотел бы найти универсальное решение.

Вот код:

<div class="places_edit_left">
    <h4>PHONE <strong>(NOT USER EDITABLE)</strong></h4>
    <input type="text" value="" name="phoneNumber"/>

    <h4>ADDRESS<strong>(NOT USER EDITABLE)</strong></h4>
    <input type="text" value="" name="address"/>
</div>

CSS

.places_edit_left{ width:250px; }
.places_edit_left input{ width:100%; max-width:100%; padding-left:10px;}

input css width
person Community    schedule 23.07.2009    source источник

Ответы (4)


arrow_upward
6
arrow_downward

Лучшее решение: Реальное решение

.content {
    width: 100%;
    -moz-box-sizing:    border-box;
    -webkit-box-sizing: border-box;
    box-sizing:         border-box;
}

Это будет работать для IE8+ и, конечно же, для всех других современных браузеров.

Уродливое решение, но работает и в более старых версиях IE: здесь

person elon    schedule 15.11.2012

arrow_upward
2
arrow_downward

  1. Неправильная блочная модель применяется к IE в причудливом режиме. Поэтому вам может потребоваться активировать строгий режим. См., например. http://www.quirksmode.org/css/quirksmode.html

  2. Вы хотите сделать ввод таким же широким, как контейнер? Задайте ширину явно (250px - 10px для заполнения - XXpx для границ). Вы хотите, чтобы ввод не был шире, чем div? Установите переполнение для div как скрытое.

person Residuum    schedule 23.07.2009
comment
Тип документа установлен правильно для перехода xhtml. Сравнил их со страницы quirksmode. Я подозреваю, что даже в строгом режиме IE обрабатывает элементы формы так, как будто они находятся в причудливом режиме. - person ; 24.07.2009

arrow_upward
0
arrow_downward

Не считая проблемы с максимальной шириной, здесь IE поступает правильно. Блочная модель CSS говорит, что общий размер элемента равен ширине ПЛЮС отступы и поля ПЛЮС.

В блочной модели также говорится, что для любого неплавающего блочного элемента весь размер элемента (включая все) всегда составляет 100% размера содержащего его элемента. Вы можете использовать это в своих интересах, установив ширину поля ввода на «авто», а затем явно установив отступы, границу и поля.

Вот небольшой пример (я знаю, что это много разметки, но это немного излишне, чтобы проиллюстрировать суть):

.places_edit_left{ 
  width:250px; 
  overflow:auto;
}

.places_edit_left input {
  padding-right:0px;
  padding-left:10px;  
  margin: 0 0 0 0;
  border:1px solid black;
  width:auto;
  display:block;
  float:none;
}
person Dave Markle    schedule 23.07.2009
comment
Извините, но это не работает. Даже когда вы устанавливаете входные данные как элементы блочного уровня, они все равно сжимаются до размеров по умолчанию. - person ; 24.07.2009
comment
Иногда у вас могут возникнуть проблемы, если ваш родительский DIV плавает. Смотрите мои правки. - person Dave Markle; 24.07.2009
comment
Кроме того, попробуйте загрузить панель инструментов IE Developer, которая позволит вам запросить документ в IE, чтобы увидеть, каковы на самом деле его свойства. - person Dave Markle; 24.07.2009

arrow_upward
0
arrow_downward

Проверьте это: http://vitaly.harisov.name/example/broken-input-width-computation-in-msie.html Я выбрал второе решение.

person Pavlo Neiman    schedule 22.04.2011