Tại sao nút div và nút có cùng kiểu hiển thị ở các kích thước khác nhau?

Question

Tôi có một trang với một số yếu tố có thể nhấp là <div> và tôi muốn thay đổi chúng thành <button> để thay thế để xác định chúng thông qua jQuery. Nhưng khi tôi thay đổi <div> s thành <button> s, kích thước của chúng thay đổi. (Tôi đang tạo kiểu cho chúng như chiều rộng cố định và chiều cao, nhưng các nút render tại có chiều rộng khác nhau và chiều cao so với div không.)

Dưới đây là một jsfiddle nhằm tái tạo vấn đề: http://jsfiddle.net/AjmGY/

Dưới đây là CSS của tôi:

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

Và HTML của tôi:

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

tôi sẽ mong đợi để xem hai hộp kích thước giống hệt nhau, nhưng hộp dưới cùng (các <button>) nhỏ hơn đáng kể. Hành vi này nhất quán trên tất cả các trình duyệt mà tôi đã thử trên cả Windows (Chrome, FireFox, IE, Opera) và Android (trình duyệt tích hợp sẵn và Dolphin).

Tôi đã thử thêm display: block; với phong cách, nghĩ rằng có thể làm cho họ cả làm bằng cách sử dụng quy tắc tương tự (ví dụ, làm cho button làm giống như một div vì nó là một yếu tố ngăn chặn bây giờ), nhưng điều đó không ảnh hưởng - các nút vẫn nhỏ hơn.

Khi tôi tăng chiều rộng đường viền, chênh lệch tăng lên. Có vẻ như nút của border là bên trongwidth của nó, thay vì trên và vượt ra ngoài số width của nó như với <div>. Theo như tôi hiểu, điều này vi phạm các box model, mặc dù W3C không nói:

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

Hành vi bình thường/được ghi lại/được mong đợi cho một số button có đường viền ở bên trong chiều rộng và chiều cao của nó chứ không phải bên ngoài? Tôi có thể dựa vào hành vi này không?

(trang của tôi sử dụng một DOCTYPE HTML5, nếu có liên quan.)

Answer 1

Buttons và kiểm soát đầu vào khác được trả lại bằng cách sử dụng border-box model theo mặc định; tức là nội dung, đệm và đường viền tất cả thêm tối đa tổng số width mà bạn khai báo. Họ cũng thường có một số đệm được thêm vào bởi các trình duyệt tùy ý theo các bảng định kiểu mặc định của chúng. Khi bạn báo giá, đây là hành vi có thể chấp nhận và không vi phạm các tiêu chuẩn; nó chỉ đơn giản là để phù hợp với rendering của các điều khiển GUI ở mức OS.

Để có được button của bạn sẽ được kích thước giống như div, kích thước của bạn nó theo mô hình nội dung hộp (đó là "the" ban đầu mô hình hộp W3C) và không ra đệm của nó:

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

jsFiddle demo