Что заставляет "таблицу стилей пользовательского агента" использовать "border-box" вместо "content-box" для выбора размера окна?

У меня создается впечатление, что таблица стилей пользовательского агента в браузерах, таких как Safari, Chrome и Firefox, является внутренним для браузера и не может быть напрямую изменена (скорее, свойство стиля должно быть переопределено).

Я также под впечатлением от различных веб-сайтов, включая Mozilla, что значение по умолчанию для свойства box-sizing для Webkit и Mozilla - это "контент-ящик".

Я тестировал это на довольно простой фиктивной странице, просматриваемой в разных браузерах.

Моя проблема заключается в том, что на двух страницах нашего производственного приложения свойство default отличается, и мы не можем понять, почему это так.

На одной странице мы видим свойство box-sizing "border-box" в веб-инспекторе или консоли. Он назначается на вход селектора CSS: not ([type = "image" ]), textarea.

На другой странице не упоминается свойство box-sizing в веб-инспекторе или консоли.

Кто-нибудь знает, есть ли способ напрямую повлиять на определение размера коробки в таблице стилей пользовательского агента для определенной страницы? Может быть, есть библиотека, которая это делает? Мы используем prototype.js и swfobject.js в приложении...

UPDATE. Если я не был уверен в том, что почти на каждой странице моего веб-приложения и на каждой странице "dummy", которую я тестировал в свойстве box-sizing, box ". По какой-то причине одна конкретная страница в моем веб-приложении показывает в веб-инспекторе, что таблица стилей пользовательского агента (тот, который используется браузером для своих значений по умолчанию) установил это свойство в "border-box". Я не могу для жизни понять, почему это так. Я ищу все, что может заставить Firefox изменить то, что его значение по умолчанию для этого свойства.

Ответ 1

Просто эта же проблема. То, что происходило в моем случае, заключалось в том, что кто-то поставил фрагмент кода Javascript над <!doctype html>. В результате, когда я проверил DOM через firebug, оказалось, что документ не имеет типа doctype.

Когда я удалил фрагмент кода JS таким образом, что объявление doctype находилось в самом верху файла, doctype снова появился и исправил проблемы с размером окна, которые я видел (тот же, что у вас был). См.:

Надеюсь, что это поможет.

Ответ 2

У меня была такая же проблема на chrome, которая по умолчанию добавила следующее правило стиля пользовательского агента:

input:not([type="image"]), textarea {
    box-sizing: border-box;
}

После добавления свойства doctype <!DOCTYPE html> правило больше не появляется.

Ответ 3

Нет, вы не можете прикоснуться к таблице стилей по умолчанию в браузере, и да, у браузеров есть разные правила для выбора размера окна в отношении полей формы. Это для совместимости со старыми браузерами, которые использовали для создания полей формы полностью с виджетами ОС, которые CSS не мог стилизовать (и поэтому у которых не было "границы" или "отступов как таковой" ).

Почему бы просто не поместить свое правило box-sizing/-moz-box-sizing/-webkit-box-sizing в таблицу стилей сайта? Работает для меня, я часто использую это, чтобы сделать входы с установленной шириной линии в современных браузерах. (IE 6-7 не поддерживает его, поэтому вам нужна дополнительная помощь.)