Question

我有一个有两行的表。第一行包含input，第二行包含select。即使我将宽度设置为100％，选择框也比输入小几个像素。任何想法为什么会这样，我怎样才能将它们的宽度设置为彼此相等并尽可能大（例如％100）以适用于所有（A级）浏览器的方式？

<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

这是因为使用＆lt; input＆gt;时，边框和填充会添加到宽度上（与大多数其他元素一样）。使用＆lt; select＆gt;，边框和填充包含在宽度中，就像在旧的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中测试

Answer 2

这似乎是浏览器以不同方式呈现表单元素的问题。尝试完全定义他们的样式，如边框宽度等。

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

2 个答案: