选择和输入字段，相同的格式，不同的大小

Question

为什么<input>和<select>字段以不同的大小显示，即使格式相同也是如此？

.classname fieldset input,select {
  float: right;
  width: 50%;
}

<select>最终比<input>小一点。 - 这是一个fiddle。

Answer 1

尝试指定box-sizing并重置border值：

.classname fieldset input,select 
{
    float: right;
    width: 50%;
    -ms-box-sizing: content-box;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    border: 1px solid #AAA; /* Set your color here. */
}

Answer 2

如上所述，您可能希望设置box-sizing，但应将其设置为border-box而不是content-box，这意味着您也不需要更改任何其他内容：

.classname fieldset input,select {
  float: right;
  width: 50%;
  box-sizing:border-box;
}

Box-Sizing:

  

box-sizing CSS属性用于更改默认的CSS框模型   用于计算元素的宽度和高度。

     

<强>边界框

     

width和height属性包括填充和边框，但是   不是保证金。