<botão> problema de preenchimento / largura
Estou a usar<button>
para fazer uma solicitação de postagem em um formulário. Eu também denominei uma.button
exatamente como o<button>
(Eu preciso doa.button
para fazer algumas coisas sobre JS
O botão possui um preenchimento, uma altura fixa. Quando eu especifico a largura do botão / a, ambos parecem iguais. Mas quando adiciono largura ao<button>
ignora o preenchiment
Estou tendo esse problema no Chrome, Firefox e Opera, então acho que não é uma falha de renderização. Também o mesmo problema com<input type="submit" />
qui está o CSS básico:
.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;
}
O 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>
Fiddle:http: //jsfiddle.net/9dtnz
Alguma sugestão por que os navegadores estão ignorando o preenchimento? (superior e inferior ao usar altura / esquerda e direita ao usar largura).