html - 如何获得相等宽度的输入和选择字段

Question

在表单上，​​我有一个选择字段和两个输入字段。这些元素垂直对齐。不幸的是，我无法获得这些元素的等宽。

这是我的代码:

<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">

对于上面的例子，选择元素的最佳宽度是198或199px(当然我试过193px，但差别很大)。我认为，这取决于分辨率、各种计算机和浏览器，因为这些元素的宽度不相等(有时我认为差异大约为 1 或 2 px)。我试图在 div 或表格行中设置这些元素，但没有帮助。

问:如何让这些元素的宽度精确相等？

Answer 1

更新的答案

这里是如何更改 input/textarea/select 元素使用的框模型，以便它们都以相同的方式运行。您需要使用 box-sizing 属性，该属性通过每个浏览器的前缀实现

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

这意味着我们前面提到的2px差异不存在..

例子在 http://www.jsfiddle.net/gaby/WaxTS/5/

注意: 在 IE 8 及更高版本上它可以工作..

---

原创

如果您重置它们的边框，则select 元素将始终比input 元素少2 个像素。

示例:http://www.jsfiddle.net/gaby/WaxTS/2/