У меня проблема с отступами в моей форме на моем сайте. Если я установил высоту/ширину для элемента формы, а затем добавил к нему отступ. Во всех браузерах, которые я пробовал, кроме Firefox, отступы добавляются к высоте/ширине.
Если у меня есть ввод шириной 200 пикселей и высотой 20 пикселей. и отступ на 5 (все способы), сумма и общая ширина и высота будут 210 пикселей и 30 пикселей, но в Firefox это 200 пикселей и 20 пикселей.
Как мне обойти это?
Дайте input этот CSS:
box-sizing: border-box;
Подробнее о box-sizing можно прочитать на QuirksMode, спецификация W3C и МДН. Вот поддержка браузера. Используйте префиксы -moz- или -webkit-, если этого требуют ваши целевые браузеры.
В этом ответе ранее предлагалось значение initial, которое я нашел с помощью клавиш со стрелками вверх/вниз в Chrome Web Inspector. Но оказывается, что initial — это ключевое слово CSS, применимое к любому свойству, представляющему начальное значение свойства – значение браузера по умолчанию. initial менее безопасен, чем явное указание используемой блочной модели. Если бы было указано box-sizing: initial, а значение браузера по умолчанию для box-sizing изменилось, заполнение input могло снова сломаться.
box-sizing: border-box; сделал свое дело :) извините за поздний ответ!
- person guzh; 22.09.2011
box-sizing: content-box; — правильный вариант, чтобы получить общую ширину/высоту 210px/30px. Я думаю, что традиционная блочная модель более логична (см. Quirksmode).
- person guzh; 22.09.2011
* { box-sizing: border-box; } в ваш файл CSS устанавливает для всех элементов значение border-box, которое будет поддерживать ширину и высоту элемента даже при добавлении полей и отступов. Модальное окно по умолчанию content-box добавляет отступы и поля к ширине вашего элемента, что, по мнению многих людей, нелогично и с ним сложно работать. Подробнее читайте здесь paulirish.com/2012/box-sizing-border- коробка-ftw. РЕДАКТИРОВАТЬ: забыл добавить, border-box поддерживается в IE8 и более поздних версиях, поэтому его безопасно использовать.
- person Gavin; 11.09.2013
Попробуйте использовать структуру CSS, такую как blueprint-css. Взгляните на примеры страниц, которые поставляются с проектом (там есть файл с именем forms.html). Это должно решить вашу проблему заполнения, а также множество других проблем, с которыми вы можете столкнуться.
input[type=text] сделал свое дело, по крайней мере, в поле ввода ..! Теперь мне нужно решить это только в текстовом поле, я посмотрю! Спасибо (:
- person guzh; 31.08.2009
Вы пытались поместить display:block в форму? Похоже, что FF может относиться к нему как к встроенному элементу.
display: inline-block может быть лучше
- person Eric; 30.08.2009
http://necolas.github.com/normalize.css/
/*
* 1. Addresses box sizing set to content-box in IE 8/9.
* 2. Removes excess padding in IE 8/9.
* 3. Removes excess padding in IE 7.
* Known issue: excess padding remains in IE 6.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
*height: 13px; /* 3 */
*width: 13px; /* 3 */
}
/*
* 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
* 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box;
}
Попробуй это:
/* Set all margins and paddings to 0 on all browsers */
* {
margin: 0;
padding: 0;
}
