为什么输入和选择的宽度不一样？

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

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

Answer 2

这是因为使用<输入>时，边框和填充将添加到宽度上（与大多数其他元素一样）。使用<选择>，宽度中包含边框和填充，就像在旧的IE怪癖模式中一样。

可以通过增加宽度取户口本，如果你知道像素宽度避开这个问题：

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+ */ 
} 

或者，你可以设置框上浆到边界框，使投入的行为，如选择，有填充在框的宽度内绘制。

测试Chrome，IE8，FF