爲什麼輸入和選擇的寬度不一樣？

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