Почему вход и выбор не получают одинаковую ширину?

Question

У меня есть таблица с двумя строками. Первая строка содержит input, а вторая строка содержит select. Даже если я установил их ширину равной 100%, поле выбора на несколько пикселей меньше, чем ввод. Любые идеи, почему это так и как я могу установить их ширину равной друг другу и максимально большой (например,% 100) таким образом, чтобы это работало во всех браузерах (класс А)?

<table width="100%" style="margin-top: 5px;">
<tr>
    <td width="35"><label for="desc">Description</label></td>
    <td>
        <input type="text" style="width: 100%;" name="desc" id="desc" />
    </td>
</tr>
<tr>
    <td width="35"><label for="group">Group</label></td>
    <td>
        <select id="group" name="group" style="width: 100%; line-height: 17px;">            
            <option value="val">name</option>            
        </select>
    </td>
</tr>
</table>

Answer 1

Это потому, что с граница и отступ добавляются к ширине (как и в большинстве других элементов).При

Вы можете обойти это, увеличив ширину, чтобы учесть это, если вы знаетеширина в пикселях:

input  { width: 200px; padding: 10px; border-width:5px; }
select { width: 230px; padding: 10px; border-width:5px; }

Или (если вы можете полагаться на поддержку браузера) вы можете использовать новое свойство CSS3 для определения размера блоков, чтобы они работали согласованно, а также рисовать отступы и границы за пределами ширины элемента:

input, select {
  width: 200px;
  padding: 10px;
  border-width:5px;
  -webkit-box-sizing: content-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: content-box;    /* Firefox, other Gecko */
  box-sizing: content-box;         /* Opera/IE 8+ */
}

В качестве альтернативы, вы можете установить box-sizing в border-box, чтобы входы вели себя как выделения, с заполнением, нарисованным внутри ширины поля.

Протестировано в ChromeIE8, FF

Answer 2

Похоже, это проблема браузеров, отображающих элементы формы по-разному. Попробуйте полностью определить их стили, такие как ширина границы и т. Д.