入力と選択フィールドの幅を等しくする方法

フォームには、1つの選択フィールドと2つの入力フィールドがあります。これらの要素は垂直方向に整列しています。残念ながら、これらの要素の幅を同じにすることはできません。

これが私のコードです：

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

上記の例の場合、select要素の最適な幅は198または199 pxです（もちろん、193pxを試しましたが、違いは大きなものです）。これらの要素の幅は同じではないため、解像度に依存します（さまざまなコンピューターやブラウザーによって異なります（場合によっては、約1ピクセルまたは2ピクセルの違いと思います）。これらの要素をdivまたはテーブルの行に設定しようとしましたが、役に立ちません。

Q：これらの要素の幅を正確に等しくするにはどうすればよいですか？

回答を更新しました

すべてが同じように動作するように、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/

上記のGabyの回答（+1）を試しましたが、私の問題は部分的にしか解決されませんでした。代わりに、content-boxがborder-boxに変更された次のCSSを使用しました。

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

このコードをcssに追加します。

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

別のクラスを作成し、2pxの例でwithサイズを増やします

.enquiry_fld_normal{
width:278px !important; 
}

.enquiry_fld_normal_select{
width:280px !important; 
 }