Tại sao đầu vào và lựa chọn không có cùng chiều rộng?

Question

Tôi có một bảng có hai hàng. Hàng đầu tiên chứa input và hàng thứ hai chứa select. Mặc dù tôi đã đặt độ rộng của chúng là 100%, hộp chọn nhỏ hơn một vài pixel so với đầu vào. Bất kỳ ý tưởng nào tại sao lại như vậy và làm cách nào tôi có thể đặt chiều rộng của chúng bằng nhau và lớn nhất có thể (ví dụ: 100%) theo cách hoạt động trên tất cả các trình duyệt (A-grade)?

<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

Điều này dường như chỉ là vấn đề với các yếu tố biểu mẫu hiển thị trình duyệt khác nhau. Hãy thử hoàn toàn xác định kiểu của chúng, như chiều rộng đường viền, vv ..

Answer 2

Điều này là do có đầu vào < >, đường viền và đệm được thêm vào chiều rộng (giống như hầu hết các phần tử khác). Với < chọn >, đường viền và phần đệm được bao gồm trong chiều rộng, giống như trong chế độ quirks IE cũ.

Bạn có thể nhận được vòng này bằng cách tăng chiều rộng để lấy tài khoản này, nếu bạn biết chiều rộng bằng pixel:

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

Hoặc (nếu bạn có thể dựa vào sự hỗ trợ trình duyệt), bạn có thể sử dụng CSS3 mới hộp kích thước tài sản để làm cho họ cư xử một cách nhất quán, và vẽ đệm và biên giới bên ngoài của chiều rộng phần tử:

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

ngoài ra, bạn có thể thiết lập hộp kích thước đến cửa hộp để làm cho các yếu tố đầu cư xử như lựa chọn, với đệm được vẽ bên trong chiều rộng của hộp.

Đã thử nghiệm trong Chrome, IE8, FF