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