Làm thế nào để có được chiều rộng bằng nhau của đầu vào và các trường chọn

Trên biểu mẫu, tôi có một lựa chọn và hai trường nhập. Các phần tử này được căn chỉnh theo chiều dọc. Thật không may, tôi không thể có được chiều rộng bằng nhau của các phần tử này.

Đây là mã của tôi:

<select name="name1" style="width:198px">
  <option>value1</option>
  <option>value2</option>
</select><br/>
<input type="text" name="id1" style="width:193px"><br/>
<input type="text" name="id2" style="width:193px">

Ví dụ trên, chiều rộng tốt nhất cho phần tử được chọn là 198 hoặc 199 px (tất nhiên tôi đã thử 193px, nhưng sự khác biệt là lớn). Tôi nghĩ, nó phụ thuộc vào độ phân giải, trên các máy tính và trình duyệt khác nhau vì các phần tử này không có chiều rộng bằng nhau (đôi khi tôi nghĩ rằng sự khác biệt là khoảng 1 hoặc 2 px). Tôi đã cố gắng đặt các phần tử này trong các hàng div hoặc bảng, nhưng không giúp được gì.

Hỏi: Làm cách nào để tôi có được chiều rộng chính xác bằng nhau của các phần tử này?

Cập nhật câu trả lời

Đây là cách thay đổi mô hình hộp được sử dụng bởi các phần tử input / textarea / select để chúng đều hoạt động theo cùng một cách. Bạn cần sử dụng thuộc box-sizingtính được triển khai với tiền tố cho mỗi trình duyệt

-ms-box-sizing:content-box;
-moz-box-sizing:content-box;
-webkit-box-sizing:content-box; 
box-sizing:content-box;

Điều này có nghĩa là sự khác biệt 2px mà chúng tôi đã đề cập trước đó không tồn tại ..

ví dụ tại http://www.jsfiddle.net/gaby/WaxTS/5/

lưu ý: Trên IE, nó hoạt động từ phiên bản 8 trở lên ..

Nguyên

nếu bạn đặt lại đường viền của chúng thì selectphần tử sẽ luôn nhỏ hơn 2 pixel so với inputphần tử ..

ví dụ: http://www.jsfiddle.net/gaby/WaxTS/2/

Tôi đã thử câu trả lời của Gaby (+1) ở trên nhưng nó chỉ giải quyết được một phần vấn đề của tôi. Thay vào đó, tôi đã sử dụng CSS sau, trong đó hộp nội dung được thay đổi thành hộp viền:

input, select {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

Thêm mã này trong css:

 select, input[type="text"]{
      width:100%;
      box-sizing:border-box;
    }

tạo một lớp khác và tăng kích thước với ví dụ 2px

.enquiry_fld_normal{
width:278px !important; 
}

.enquiry_fld_normal_select{
width:280px !important; 
 }