Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 22
Предложенное Вами решение более элегантное, но отметает IE6-7. Думаю, что IE7 пока стоит брать в расчет. А каши и нелогичности я не вижу, каждый выбирает свой путь в оформлении кода))) Хотя на вкус и цвет приятелей нет.
В Safary 2.0 -webkit-box-sizing не работает.
Кста, ссылка на поддержку свойства box-sizing.
В Safary 2.0 -webkit-box-sizing не работает.
Кста, ссылка на поддержку свойства box-sizing.
1. может пользователи виндовс и динозавры, но есть потребности и должны быть реализации, покрывающие эти потребности.
2. Тем, что не работает, если не задана длина у блока родителя b-input. Это можно посмотреть, собрав предлагаемый html и css из презентации. У меня появляется прокрутка у документа, а это уже плохо.
Пишите в ЛС, буду рад обсудить ваши версии.
2. Тем, что не работает, если не задана длина у блока родителя b-input. Это можно посмотреть, собрав предлагаемый html и css из презентации. У меня появляется прокрутка у документа, а это уже плохо.
Пишите в ЛС, буду рад обсудить ваши версии.
1. Да нет, я наоборот за светлое будущее, но и за то, чтобы все имели равные возможности.
2. Вот ссылка на метод, который вы предложили. Я собрал все в точности по презентации, только без разделения на файлы. Посмотрите в IE6-7, блок будет со скроллером, а это говорит о том, что содержимое не поместилось в контейнер.
2. Вот ссылка на метод, который вы предложили. Я собрал все в точности по презентации, только без разделения на файлы. Посмотрите в IE6-7, блок будет со скроллером, а это говорит о том, что содержимое не поместилось в контейнер.
Если поддержка IE 6-7 не ставится во главу угла, то можно воспользоваться следующей конструкцией:
Демка test.dis.dj/box-sizing/, а также настоятельно рекомендуется почитать www.quirksmode.org/css/box.html
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
и внешних отступов (margin)
Margin — это поле, не вводите людей в заблуждение, путаясь в терминологии
Если бы все было так же просто с input=file… А то там надо очень извращатся, чтоб изменить стандартный дизайн
А есть сделать только правый 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>
<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>
Opera 11 в первом примере поле «выехало» за пределы блока. Это так нужно?
Полученный инпут выглядит как угодно, только не как инпут. Так же за бортом остался селект и текстареа. Статья фигня.
А мне понравилось. Коротенькая, легко читаемая статья, с готовым, работающим при разных внешних условиях, решением. Спасибо )
Не хватает информации в статье: Как зафиксировать ширину текстового поля textarea, чтобы мышью нельзя было изменять размер по ширине.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Тюнинг резинового текстового поля