¿Por qué la entrada y la selección no tienen el mismo ancho?

Question

Tengo una tabla con dos filas. La primera fila contiene un input y la segunda fila contiene un select. Aunque he establecido sus anchuras en un 100%, el cuadro de selección es unos pocos píxeles más pequeño que la entrada. ¿Alguna idea de por qué es esto así y cómo puedo establecer sus anchuras para que sean iguales entre sí y lo más grande posible (por ejemplo,% 100) de una manera que funcione en todos los navegadores (grado A)?

<table width="100%" style="margin-top: 5px;"> 
<tr> 
    <td width="35"><label for="desc">Description</label></td> 
    <td> 
     <input type="text" style="width: 100%;" name="desc" id="desc" /> 
    </td> 
</tr> 
<tr> 
    <td width="35"><label for="group">Group</label></td> 
    <td> 
     <select id="group" name="group" style="width: 100%; line-height: 17px;">    
      <option value="val">name</option>    
     </select> 
    </td> 
</tr> 
</table> 

Answer 1

Esto sólo parece ser el problema con los navegadores reproducción de elementos de forma diferente. Intente definir completamente sus estilos, como el ancho del borde, etc.

Answer 2

Esto se debe a que con una entrada < >, el borde y el relleno se agregan al ancho (como la mayoría de los otros elementos). Con un <seleccione>, el borde y el relleno se incluyen en el ancho, al igual que en el antiguo modo de IE peculiaridades.

Puede obtener esta ronda aumentando la anchura de tener en cuenta esto, si se conoce el ancho en píxeles:

input { width: 200px; padding: 10px; border-width:5px; } 
select { width: 230px; padding: 10px; border-width:5px; } 

O (si se puede contar con el apoyo del navegador), puede utilizar el nuevo CSS3 cuadro de dimensionamiento de propiedad para hacer que se comporten consistentemente, y sacar el relleno y el borde exterior de la anchura del elemento:

input, select { 
    width: 200px; 
    padding: 10px; 
    border-width:5px; 
    -webkit-box-sizing: content-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: content-box; /* Firefox, other Gecko */ 
    box-sizing: content-box;   /* Opera/IE 8+ */ 
} 

como alternativa, se puede establecer cuadro de dimensionamiento de la frontera de la caja para que las entradas se comportan como los selecciona, con relleno dibujado dentro del ancho de la caja.

Probado en Chrome, IE8, FF