¿Por qué un div y un botón con los mismos estilos se procesan en diferentes tamaños?

Question

Tengo una página con algunos elementos que hacen clic en <div>, y quiero cambiarlos a <button> s para facilitar la identificación a través de jQuery. Pero cuando cambio el <div> s al <button> s, su tamaño cambia. (Los estoy peinado como ancho fijo y altura, pero el botón hace que en una anchura y una altura diferente que lo hace el div.)

Aquí hay una jsFiddle que reproduce el problema: http://jsfiddle.net/AjmGY/

Aquí está mi CSS:

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

Y mi HTML:

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

yo esperaría a ver dos cajas de tamaño idéntico, pero la caja inferior (el <button>) es notablemente más pequeño. Este comportamiento es constante en todos los navegadores en los que lo probé, tanto en Windows (Chrome, FireFox, IE, Opera) como en Android (navegador integrado y Dolphin).

He intentado añadir display: block; al estilo, pensando que eso podría hacer que tanto hacen usando las mismas reglas (es decir, hacer que la button render como un div ya que es un elemento de bloque ahora), pero que no tuvo ningún efecto - la el botón permaneció más pequeño.

A medida que aumente el ancho del borde, la disparidad aumenta. Parece que el botón border es dentro de es width, en lugar de encima y más allá de width como con <div>. Por lo que yo entiendo, esto viola la box model, aunque el W3C hace decir:

user agents may render borders for certain user interface elements (e.g., buttons, menus, etc.) differently than for "ordinary" elements.

¿Es normal/documentado/el comportamiento esperado para un button tener su borde en el interior de su ancho y alto, en lugar de afuera? ¿Puedo confiar en este comportamiento?

(Mi página utiliza un tipo de documento HTML 5, si eso es relevante.)

Answer 1

botones y otros controles de entrada se procesan mediante el border-box model por defecto; es decir, el contenido, el relleno y el borde se suman al total de width que usted declara. También suelen tener algo de relleno añadido por los navegadores de forma arbitraria de acuerdo con sus hojas de estilo predeterminadas. Como usted cita, este es un comportamiento aceptable y no una violación de los estándares; es simplemente para dar cabida a la representación de los controles de GUI a nivel del sistema operativo.

para obtener su button ser del mismo tamaño que su div, el tamaño de acuerdo con el modelo de contenido de la caja (que es "el" modelo de caja del W3C original) y cero fuera de su padding:

button.styled { 
    -moz-box-sizing: content-box; 
    -webkit-box-sizing: content-box; 
    box-sizing: content-box; 
    padding: 0; 
} 

jsFiddle demo