У меня есть страница с некоторыми кликабельными<div> элементы, и я хочу изменить их на<button>Вместо этого, чтобы было легче идентифицировать их с помощью jQuery. Но когда я меняю<div>с<button>с, их размер меняется. (Я оформляю их как фиксированные ширину и высоту, но кнопка отображается с другой шириной и высотой, чем у div.)

Вот jsfiddle, который воспроизводит проблему:http://jsfiddle.net/AjmGY/

Вот мой CSS:

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

И мой HTML:

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

Я ожидаю увидеть две коробки одинакового размера, но нижняя коробка (<button>) заметно меньше. Такое поведение одинаково для всех браузеров, на которых я его пробовал, как для Windows (Chrome, FireFox, IE, Opera), так и для Android (встроенный браузер и Dolphin).

Я пытался добавитьdisplay: block; к стилю, думая, что это может сделать их оба рендеринга с использованием одних и тех же правил (т.е. сделатьbutton сделать какdiv так как теперь это блочный элемент), но это никак не повлияло - кнопка осталась меньше.

Когда я увеличиваю ширину границы, расхождение увеличивается. Похоже, что кнопкиborder являетсявнутри егоwidth, а не выше и за его пределамиwidth как с<div>, Насколько я понимаю, это нарушаетмодель коробкихотя W3C говорит:

пользовательские агенты могут отображать границы для определенных элементов пользовательского интерфейса (например, кнопок, меню и т. д.) иначе, чем для «обычных» элементов.

Это нормальное / документированное / ожидаемое поведение дляbutton чтобы его граница была внутри его ширины и высоты, а не снаружи? Могу ли я положиться на это поведение?

(Моя страница использует тип документа HTML5, если это актуально.)