Tenho uma página com alguns cliques<div> elementos e quero alterá-los para<button>s para facilitar a identificação através do jQuery. Mas quando eu mudo o<div>s para<button>s, seu tamanho muda. (Estou os denominando largura e altura fixas, mas o botão é renderizado com uma largura e altura diferentes da div.)

Aqui está um jsfiddle que reproduz o problema:http: //jsfiddle.net/AjmGY

Aqui está o meu CSS:

.styled {
    border: 4px solid black;
    background: blue;
    width: 100px;
    height: 100px;
}

E meu HTML:

<div class="styled"></div>
<button class="styled"></button>

Eu esperaria ver duas caixas de tamanho idêntico, mas a caixa inferior (o<button>) é visivelmente menor. Esse comportamento é consistente em todos os navegadores em que experimentei, Windows (Chrome, FireFox, IE, Opera) e Android (navegador interno e Dolphin).

Eu tentei adicionardisplay: block; ao estilo, pensando que isso pode fazer com que ambos processem usando as mesmas regras (ou seja, faça obutton renderize como umdiv já que é um elemento de bloco agora), mas isso não teve efeito - o botão permaneceu meno

À medida que a largura da borda aumenta, a disparidade aumenta. Parece que o botãoborder édentr Estáwidth, em vez de acima e além do seuwidth como com o<div>. Tanto quanto eu entendo, isso viola obox model, embora o W3C diga:

s agentes @user podem renderizar bordas para certos elementos da interface do usuário (por exemplo, botões, menus etc.) de maneira diferente dos elementos "comuns".

É um comportamento normal / documentado / esperado para umbutton ter sua borda no interior de sua largura e altura, em vez de fora? Posso confiar nesse comportamento?

(Minha página usa um doctype HTML5, se isso for relevante.)