<button> problema de relleno/ancho

Question

Estoy usando <button> para hacer una solicitud por correo en un formulario. También diseñé un a.button exactamente como el <button> (necesito el a.button para hacer algunas cosas de JS).

El botón tiene algo de relleno, una altura fija. Cuando especifico el ancho del botón/a, ambos se ven iguales. Pero cuando agrego ancho al <button>, ignora el relleno.

Tengo este problema en Chrome, Firefox y Opera, así que supongo que no es un error de renderizado. También mismo problema con <input type="submit" />

Aquí está el CSS básica:

.button, button { 
    margin: 0; 
    display: inline-block; 
    border: 0; 
    text-decoration: none; 
    cursor: pointer; 
    color: black; 
    background: #ddd; 
    font: 12px Verdana; 
    padding: 40px; /* 40px, so you can see that it won't be rendered with width */ 
    text-align: center; 
} 

El HTML:

<a href="#" class="button">Some text</a> 
<button>Some text</button> 
<!-- Works fine till here --> 
<br /><br /> 
<a href="#" class="button" style="width:200px">Some text</a> 
<button style="width:200px">Some text</button> 

violín: http://jsfiddle.net/9dtnz/

Cualquier sugerencia por qué los navegadores están ignorando el relleno? (arriba y abajo cuando usa altura/izquierda y derecha cuando usa ancho).

Answer 1

muy raro, he visto a mi Chrome tiene una regla box-sizing: border-box; de elementos de entrada, por lo que el relleno está incluido en el ancho ...

Así que para evitar que acaba de especificar box-sizing: content-box; (algunos prefijo puede ser necesario).

Answer 2

Me parece bien, por lo que podría ser un problema de conflicto de hojas de estilo. Intente usar! Importante para anular cualquiera que sea y que podría resolver su problema.

.button, button { 
    margin: 0; 
    display: inline-block; 
    border: 0; 
    text-decoration: none; 
    cursor: pointer; 
    color: black; 
    background: #ddd; 
    font: 12px Verdana; 
    padding: 40px!important; /* 40px, so you can see that it won't be rendered with width */ 
    text-align: center; 
} 

Espero que esto ayude.

Michael.