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

Question

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

У меня есть div с явно установленной шириной 250 пикселей. В этом 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;} 

Answer 1

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

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

Answer 2

Не считая вопроса о максимальной ширине, IE делает правильные вещи здесь. Модель CSS-бокса говорит, что общий размер элемента - это ширина PLUS для его заполнения, PLUS - его поля.

В коробке также указано, что для любого элемента не-плавающего элемента блока весь размер элемента (включая все) всегда составляет 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; 
} 

Answer 3

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

Answer 4

Лучшее решение: Real solution

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

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

Гадкое решение, но работа также в старом IE: Here