Rebulus Jan 5 2011 at 01:18

Тюнинг резинового текстового поля

3 min

27K

CSS*

From sandbox

+15

Comments 22

UFO just landed and posted this here

Rebulus Jan 5 2011 at 02:42

Предложенное Вами решение более элегантное, но отметает IE6-7. Думаю, что IE7 пока стоит брать в расчет. А каши и нелогичности я не вижу, каждый выбирает свой путь в оформлении кода))) Хотя на вкус и цвет приятелей нет.
В Safary 2.0 -webkit-box-sizing не работает.
Кста, ссылка на поддержку свойства box-sizing.

-5

UFO just landed and posted this here

Rebulus Jan 5 2011 at 02:57

1. может пользователи виндовс и динозавры, но есть потребности и должны быть реализации, покрывающие эти потребности.
2. Тем, что не работает, если не задана длина у блока родителя b-input. Это можно посмотреть, собрав предлагаемый html и css из презентации. У меня появляется прокрутка у документа, а это уже плохо.

Пишите в ЛС, буду рад обсудить ваши версии.

-2

phantasm Jan 5 2011 at 04:38

поддерживать safari 2.0 совершенно ни к чему. текущая версия — 5, ещё есть народ на 4-ке и совсем мало — на 3-й версии. такими темпами вы бы ещё Netscape Navigator поддержали…

Rebulus Jan 5 2011 at 12:44

Но если работает без лишнего дополнения кода — это тоже хорошо ;), зачем же отметать получившееся.

UFO just landed and posted this here

Rebulus Jan 5 2011 at 03:23

1. Да нет, я наоборот за светлое будущее, но и за то, чтобы все имели равные возможности.
2. Вот ссылка на метод, который вы предложили. Я собрал все в точности по презентации, только без разделения на файлы. Посмотрите в IE6-7, блок будет со скроллером, а это говорит о том, что содержимое не поместилось в контейнер.

-1

UFO just landed and posted this here

Rebulus Jan 5 2011 at 12:24

Абсолютно нет, это лишь демонстрация, показывающая недочет.

-2

dfuse Jan 5 2011 at 13:38

Если поддержка IE 6-7 не ставится во главу угла, то можно воспользоваться следующей конструкцией:

box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;

Демка test.dis.dj/box-sizing/, а также настоятельно рекомендуется почитать www.quirksmode.org/css/box.html

Yrst Jan 5 2011 at 16:24

и внешних отступов (margin)

Margin — это поле, не вводите людей в заблуждение, путаясь в терминологии

Rebulus Jan 5 2011 at 17:03

Поле (в типографии) — отступ от края страницы до содержимого. Соответственно содержимым в данном случае является сам блок, и поле в таком варианте можно называть внешним отступом.

Rebulus Jan 5 2011 at 17:04

Чтобы не вызывать в дальнейшем проблем с формулировкой margin, изменил немного статью

Latobco Jan 6 2011 at 13:32

Если бы все было так же просто с input=file… А то там надо очень извращатся, чтоб изменить стандартный дизайн

ozoned Jan 6 2011 at 15:22

А есть сделать только правый margin для .width-setter, но двойной и с учетом границ поля, тогда можно отказаться от задания высоты, неестественных position и т.п.

<div class='field'>
  <label for='text">Резиновое поле</label>
  <div class='field-wrap' style='margin: 0 20px 0 0'>
    <input type='text' name=«text» id=«text» style='padding: 9px; border: 1px solid #000; background: #fff' />
  </div>
</div>