Почему div и кнопка с одинаковыми стилями отображаются в разных размерах? - PullRequest
Новая
       32

Почему div и кнопка с одинаковыми стилями отображаются в разных размерах?

12 голосов
/ 06 декабря 2011

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

1 Ответ

10 голосов
/ 06 декабря 2011

Кнопки и другие элементы управления вводом отображаются с использованием модели border-box по умолчанию;т. е. содержимое, отступы и границы составляют в сумме width, которые вы объявляете.У них также часто есть некоторые дополнения, добавленные браузерами произвольно согласно их таблицам стилей по умолчанию.Как вы указываете, это приемлемое поведение, а не нарушение стандартов;это просто для поддержки рендеринга элементов управления графического интерфейса на уровне ОС.

Чтобы ваш button соответствовал размеру вашего div, измените его размер в соответствии с моделью блока содержимого (который является "the").оригинальная модель коробки W3C) и обнулите ее отступ: 

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

jsFiddle demo

...