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

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

25 голосов
/ 24 сентября 2011

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

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

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

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

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

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

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

ОБНОВЛЕНИЕ : на случай, если я не получу ясности почти на каждой странице в моем веб-приложении и на каждой "фиктивная "страница, которую я тестировал на свойстве box-sizing, имеет значение по умолчанию" content-box ".По какой-то причине одна конкретная страница в моем веб-приложении показывает в веб-инспекторе, что таблица стилей пользовательского агента (используемая браузером для значений по умолчанию) установила для этого свойства значение «border-box».Я не могу понять, почему это так.Я ищу все, что может привести к тому, что Firefox изменит значение по умолчанию для этого свойства.

Ответы [ 3 ]

42 голосов
/ 30 ноября 2011

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

no-doctype

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

Has-doctype

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

6 голосов
/ 31 мая 2013

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

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

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

2 голосов
/ 24 сентября 2011

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

...