Должны ли HTML-кнопки иметь такую ​​же блочную модель, как и все остальное? - PullRequest
Новая
       11

Должны ли HTML-кнопки иметь такую ​​же блочную модель, как и все остальное?

1 голос
/ 01 декабря 2011

Обращаясь как к элементу button, так и к элементу input с type из button, я столкнулся с поведением, которое я считаю ошибкой (в последних выпусках Firefox и Chrome). Но, учитывая, что элементы формы часто являются исключениями из того, что я считаю правилами w3, я подумал, что я бы попросил подтверждение, прежде чем предположить, что я прав.

Поведение таково: в стандартном режиме, когда я добавляю границу к такому элементу, граница появляется внутри ширины элемента. Если я вручную установлю box-sizing на content-box (с использованием префиксов поставщика), поведение будет соответствовать ожиданиям, но когда box-sizing оставлено по умолчанию , это не content-box. Вот пример jsfiddle . Если вы не хотите переходить на jsfiddle, вот исходный код: 

<!doctype html>
<html>
<head>
<title>Broken box model?</title>
<style>
body {
    padding: 30px;
    background: brown;
}
div {
    position: relative;
}
input {
    background-color: #CCC;
    font-family: Helvetica, Verdana, sans-serif; /* Yes, I know Helvetica and Verdana are dissimilar. I don't care. Arial sucks. */
    font-size: 18px;
    font-weight: bold;
    color: white;
    text-transform: uppercase;
    border: 0;
    width: 150px;
    height: 90px;
    margin: 4px;
}
input:hover {
    margin: 0;
    border: 4px solid white;
}
input:active {
    margin: 0;
    border: 4px solid white;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}
</style>
</head>
<body>
    <div>
    <input type="button" value="I am a button" />
    </div>
</body>
</html>

Это правильное поведение, или я наткнулся на ошибку?

1 Ответ

0 голосов
/ 28 декабря 2011

Видимо, об этой ошибке уже сообщалось в Chrome и Firefox.Брешь в том, что в обоих случаях эти элементы имеют начальное значение box-sizing: padding-box, установленное в их таблицах стилей браузера.Так что это технически не значение по умолчанию (начальное! = Значение по умолчанию).Однако единственный способ вернуть эти элементы обратно в box-sizing: content-box - это использовать проприетарные расширения браузера для content-box, так что не существует по-настоящему совместимого с CSS способа сделать это.Размер блока не существует для CSS 2.1, и проприетарные расширения браузера не действительны для CSS 3.

...