2

Заметил я тут одну особенность, если задать DOCTYPE html запустить такой код в браузере:

<div style="width: 300px; border: 1px solid;">
  <input type="text" style="width: 100%;">
</div>

то input, начинает чуть-чуть вылезать из блока. Если же DOCTYPE убрать, то всё нормально. Насколько известным является этот баг (я например кое-как его вычислил)? И как с ним бороться (какой DOCTYPE ставить или как-то по-другому)?

UPD:

Методом тыка выяснил, что какой DOCTYPE не подставь, input всё равно будет вылезать :(. Повторюсь: без DOCTYPE всё ок.

UPD2:

Выяснил, что проблема связана с т.н. "режимом совместимости". В этом режиме как раз и отображается всё как надо. Теперь вопрос: как отобразить как надо в обычном режиме?

2
  • 5
    DOCTYPE как девочки, все вроди одинаковые а дают по разному! Собственно и тут тоже самое)
    – Palmervan
    6 фев 2012 в 21:15
  • Собственно, я это и так понимаю :). Но тут особый случай, как мне кажется.
    – toliklunev
    6 фев 2012 в 21:19

2 ответа 2

3

Дело в том, что вы, видимо, забыли про ширину границ div-а и input-а. Именно на эти 4 пикселя (ширина правых и левых рамок)input и вываливается из родительского элемента. На вскидку могу предложить лечение отрицательным правым margin-ом, фиксированной шириной input-а, либо удалением границ.

Upd: А не писать DOCTYPE - позволять браузеру отображать сайт как ему хочется, что не есть хорошо.

Upd:

простой вариант: написать divpadding-right:2px

вариант с JS:

HTML:
...
<div id="container">
  <input type="text" id="input">
</div>
...

CSS:
#container {
  width:70%;
  border:1px solid;
}
#input {
  border:1px solid green;
}

JS: 
var input = document.getElementById('input');
var container = document.getElementById('container');
input.style.width = container.offsetWidth - 4 +'px';
4
  • Спасибо, отрицательный margin помог.
    – toliklunev
    7 фев 2012 в 5:14
  • Простите, поспешил. Не очень то он помог, хотя по идее должен был. Про границы вы правы.
    – toliklunev
    7 фев 2012 в 5:23
  • Добавьте побольше контекста в задачу, может быть смогу помочь с конкретной проблемой.
    – ikoolik
    7 фев 2012 в 5:28
  • Ок, есть резиновый сайт. На этом сайте есть div, шириной 70%. Внутри div'а есть input, который должен быть растянут на весь div и не выходить за границы этого div'a. Жалко нельзя задать ширину типа (100% - 4px).
    – toliklunev
    7 фев 2012 в 6:14
0

Если вы говорите о "режимом совместимости", то я так понимаю, что речь идет о IE. В этом случае, я бы задавал принудетельно режим, в котором должен отображать страницу браузер. Ну, к примеру восьмой версии осла, прописываем так:

<meta http-equiv="X-UA-Compatible" content="IE=8" />
1
  • В режиме совместимости будет работать любой браузер, если не указать DOCTYPE. Вопрос заключался не в этом.
    – toliklunev
    7 фев 2012 в 4:05

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.