为什么输入和选择不能获得相同的宽度？

Question

我有一个有两排的桌子.第一行包含一个input,第二行包含一个select.即使我将宽度设置为100%,选择框也比输入小几个像素.任何想法为什么会这样,我怎么能以一种适用于所有(A级)浏览器的方式将它们的宽度设置为彼此相等并尽可能大(例如%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>时,边框和填充会添加到宽度上(与大多数其他元素一样).使用<select>,边框和填充包含在宽度中,就像在旧的IE怪癖模式中一样.

如果你知道宽度(以像素为单位),你可以通过增加宽度来考虑这个问题:

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

或者(如果您可以依赖浏览器支持),您可以使用新的CSS3 box-sizing属性使它们表现一致,并在元素宽度之外绘制填充和边框:

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,使输入的行为与选择相似,并在框的宽度内绘制填充.

在Chrome,IE8,FF中测试过