ширина элемента формы

Question

Вкл. эта страница Ввод формы Долгота имеет ширину 181px, а выбор типа имеет ширину 175px. Я не могу понять, почему они имеют разную ширину, потому что в обоих случаях соответствующее правило CSS:

.uniForm .small {
    width: 30% !important;
}

и родительский div в обоих случаях имеет ширину 604 пикселей.

Аналогично, выбор страны в 6 раз короче, чем ввод текста адреса, даже если кажется, что они оба подчиняются одним и тем же правилам CSS.

Обновление

Благодаря объяснениям о различных используемых моделях размеров блоков, я добавил следующее правило CSS, но, похоже, оно не устранило проблему (в Firefox):

html {      
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -khtml-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Answer 1

Чтобы убедиться, что разные элементы используют одинаковый размер, как указано в CSS, сначала убедитесь, что все они используют одну и ту же модель box-sizing, например:

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

JS Fiddle demo .

<ч />

Отредактировано в ответ на вопрос OP, в комментариях ниже:

Сможете ли вы придумать какое-то правило, которое гарантировало бы применение согласованной модели размеров блоков ко всем элементам формы?

Само правило создать достаточно просто, но оно не будет реализовано всеми элементами формы, поскольку <input type="radio" /> и <input type="checkbox" /> (при минимум ) игнорировать правила, однако моя лучшая попытка, в настоящее время:

#formElementID input, /* note that this will include `<input type="submit" />` and so on...
#formElementID select,
#formElementID textarea {
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -khtml-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Ссылки

• box-sizing в Mozilla Developer Network .

Answer 2

Элемент select имеет размер блока border-box, тогда как элемент input имеет content-box. Это приводит к тому, что для разных элементов вычисление ширины и заполнения выполняется по-разному.

Это то, что я считаю недостатком таблиц стилей по умолчанию в различных браузерах. См. этот вопрос Я недавно задал вопрос.