Question

在this page上，经度表格输入的宽度为181px，而类型选择的宽度为175px。我无法弄清楚为什么它们有不同的宽度，因为在两种情况下相关的CSS规则都是：

.uniForm .small {
    width: 30% !important;
}

，两种情况下的父div的宽度为604px。

同样，Country选择比Address文本输入短6px，即使它们似乎都受相同的CSS规则控制。

更新

由于对使用的不同盒子大小模型的解释，我添加了以下CSS规则，但它似乎没有解决问题（在Firefox中）：

html {      
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -khtml-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Answer 1

为了确保不同的元素使用CSS中指定的相同大小，首先要确保它们都使用相同的box-sizing模型，例如：

-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-khtml-box-sizing: border-box;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

JS Fiddle demo

已编辑以回应OP提出的问题，在下面的评论中：

您是否能够制定某种规则来确保将一致的盒子大小调整模型应用于所有表单元素？

规则本身很容易创建，但它不会由所有表单元素实现，因为<input type="radio" />和<input type="checkbox" />（在至少）将无视规则，无论我最好的尝试，目前：

#formElementID input, /* note that this will include `<input type="submit" />` and so on...
#formElementID select,
#formElementID textarea {
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -khtml-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

参考文献：

box-sizing at Mozilla Developer Network。

Answer 2

select元素的大小调整为border-box，而input元素的大小为content-box。这导致宽度和填充的计算对于不同的元素以不同方式进行。

我认为这是各种浏览器的默认样式表中的一个缺陷。请参阅我之前问过的this question。

表单元素宽度

更新

2 个答案: