在表单上，我有一个选择字段和两个输入字段。这些元素垂直对齐。不幸的是，我无法获得这些元素的相同宽度。
这是我的代码：
<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 或 199 px（当然我尝试了 193px，但差异很大）。我认为，这取决于分辨率、不同的计算机和浏览器，因为这些元素的宽度不相等（有时我认为差异约为 1 或 2 像素）。我尝试在 div 或表格行中设置这些元素，但没有帮助。
问：如何才能使这些元素的宽度精确相等？
更新的答案
以下是如何更改 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/ http://www.jsfiddle.net/gaby/WaxTS/5/
note: 在 IE 上，它可以从版本 8 及更高版本开始工作。
Original
如果你重置他们的borders那么select元素总是比元素小 2 个像素input元素..
例子：http://www.jsfiddle.net/gaby/WaxTS/2/ http://www.jsfiddle.net/gaby/WaxTS/2/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
