Содержание
Сегодняшний веб-браузер прошел долгий путь от сумасшедших дней, когда любая кросс-браузерная согласованность была желательной. Современные веб-браузеры полностью соответствуют стандартам. Они хорошо играют вместе и обеспечивают довольно равномерное отображение страниц в различных браузерах. Это включает в себя последние версии Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari и различные браузеры, которые можно найти на множестве мобильных устройств, используемых для доступа к веб-сайту сегодня.
Хотя прогресс, безусловно, был достигнут, когда дело доходит до веб-браузеров и того, как они отображают CSS, между этими различными вариантами программного обеспечения все еще есть несоответствия. Одна из распространенных несоответствий заключается в том, как эти браузеры по умолчанию вычисляют поля, отступы и границы.
Из-за этих аспектов блочной модели влияют все элементы HTML, а также потому, что они важны при создании макетов страниц, несовместимое отображение означает, что страница может отлично выглядеть в одном браузере, но выглядеть немного в другом. Чтобы решить эту проблему, многие веб-дизайнеры нормализуют эти аспекты блочной модели. Эта практика также известна как «обнуление» значений полей, отступов и границ.
Примечание о настройках браузера по умолчанию
Все веб-браузеры имеют настройки по умолчанию для определенных аспектов отображения страницы. Например, гиперссылки выделены синим цветом и подчеркнуты по умолчанию. Это согласуется с различными браузерами, и хотя большинство дизайнеров изменяют их в соответствии с потребностями своего конкретного проекта, тот факт, что все они начинают с одинаковых настроек по умолчанию, облегчает внесение этих изменений. К сожалению, значения по умолчанию для полей, отступов и границ не обладают одинаковым уровнем согласованности между браузерами.
Нормализация значений для полей и отступов
Лучший способ решить проблему несовместимой блочной модели — установить все поля и значения заполнения элементов HTML на ноль. Есть несколько способов сделать это, добавив это правило CSS в таблицу стилей:
Это правило CSS использует * или подстановочный знак. Этот символ означает «все элементы», и он будет в основном выбирать каждый элемент HTML и устанавливать поля и отступы равными 0. Даже если это правило очень неопределенное, поскольку оно находится во внешней таблице стилей, оно будет иметь более высокую специфичность, чем браузер по умолчанию. значения делают. Поскольку эти значения по умолчанию — это то, что вы перезаписываете, этот единый стиль выполнит то, что вы намереваетесь сделать.
Другой вариант — применить эти значения к элементам HTML и body. Поскольку все остальные элементы на вашей странице будут дочерними по отношению к этим двум элементам, CSS-каскад должен применять эти значения ко всем этим другим элементам.
Это запустит ваш дизайн в одном и том же месте во всех браузерах, но следует помнить одну вещь: после того, как вы выключите все поля и отступы, вам нужно будет выборочно включить их снова для определенных частей вашей веб-страницы, чтобы получить внешний вид. и чувствую, что ваш дизайн требует.
Границы
Вы можете подумать «но браузеры не имеют рамки вокруг элемента body по умолчанию». Это не совсем верно. Более старые версии Internet Explorer имели прозрачную или невидимую рамку вокруг элементов. Если вы не установите границу на 0, эта граница может испортить макеты вашей страницы. Если вы решили, что продолжите поддерживать эти устаревшие версии IE, вам необходимо решить эту проблему, добавив в свой текст и стили HTML следующие элементы:
HTML, body {
поле: 0px;
отступы: 0px;
граница: 0px;
}
Подобно тому, как вы отключили поля и отступы, этот новый стиль также отключит границы по умолчанию. Вы также можете сделать то же самое, используя переключатель подстановочных знаков, показанный ранее в статье.
Оригинальная статья Дженнифер Крынин. Под редакцией Джереми Жирар.
