Сводка проблем совместимости интерфейсных браузеров

браузер

в первой строке HTML-документа перед тегом . Сообщает синтаксическому анализатору браузера, какой стандарт документа использовать для анализа этого документа. Отсутствие или неправильный формат DOCTYPE приведет к тому, что документ будет отображаться в режиме совместимости.

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

1. сброс

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

Но во многих случаях наш сброс CSS слишком раздут, есть две основные проблемы:

1.1 Многие браузеры установили атрибуты элементов по умолчанию в одну сторону, например, отступы и поля div равны 0, в этом нет необходимости.

1.2 также записал настройки некоторых очень необычных элементов в сброс CSS.

2. Проблема перекрытия верхнего и нижнего полей

Соседние два div margin-left margin-right не будут перекрываться, но соседний margin-top margin-bottom будет перекрываться.

3. Проблема высоты td

Ширина td в таблице не включает ширину границы, но высота td в oprea и ff включает высоту границы.

Решение. Установите высоту строки равной высоте. Т.е. если в тд нет содержимого, граница отображаться не будет.

4, совместим с IE8 или IE9 или любым браузером IE версий

4. 1. Метод условного комментария (IE10+ больше не поддерживает условные комментарии)

больше gt || больше или равно gte || меньше lt || меньше или равно lte()

Используйте комментарии к документации для конкретного браузера IE. так:

<!DOCTYPE html>

<html lang="en"> 

Он может независимо поддерживать и обрабатывать таблицы стилей, совместимые с браузером IE, не утопая во множестве хакерских меток css, нужно только независимо применять правила стиля к IE8.

4.2 Не-IE (также распознается IE10+), добавленный здесь рассматривается как внутренний комментарий в IE, а предыдущий комментарий ()

<div class="box" id="box"></div>

<![endif]-->

5. Для двухъядерных браузеров 360

Можно добавить следующую метаинформацию заголовка, чтобы веб-страница отображалась с помощью ядра webkit:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

IE=edge: продолжайте использовать режим самого высокого уровня для отображения контента;

chrome=1: подключаемый модуль Google Chrome Frame (Google Embedded Browser Framework GCF), при использовании IE для просмотра веб-страниц он фактически отображается с использованием ядра браузера Chrome, и поддерживается по крайней мере IE6, но предполагается, что клиент установил GCF.

Но на самом деле этот метафлаг распознается браузером IE и не является признанным стандартом, поэтому иногда вы обнаружите, что 360 не всегда может отображать ваши веб-страницы, разработанные в соответствии с современными стандартами, с ядром chrome.

Вы можете попробовать, добавив:<meta name="renderer" content="webkit">

Эта мета-идентификация реализована самой 360 (подробности:meta.html), что означает, что для отображения веб-страниц с ядром Chrome требуется браузер 360.Color.360.Talent/V6/help/met…

6, ie8 css-совместимость

6.1 Используйте метатеги для настройки рендеринга в браузере:

В IE8 есть понятие "представление совместимости". Когда IE8 был выпущен, в нем были сделаны большие улучшения по сравнению с IE6/7, но многие старые сайты оптимизированы только для IE6/7, и рендеринг с использованием IE8 будет беспорядочным. В IE8 добавлена функция «Просмотр в режиме совместимости», так что вы можете использовать ядро IE6 или IE7 для отображения страниц в IE8. Это, конечно, не то, что нам нужно, поэтому нам нужно использовать метатег, чтобы заставить IE8 использовать последнее ядро для отображения страницы, код выглядит следующим образом:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

IE=edge означает принудительное использование последнего ядра IE,

chrome=1 означает, что если установлен подключаемый модуль браузера Google Chrome Frame для IE6/7/8 и других версий (позволяющий браузеру пользователя по-прежнему выглядеть как меню и интерфейс IE, но пользователь фактически использует ядро браузера Chrome), затем используйте ядро Chrome для рендеринга.

Контраст 360:<meta name="renderer" content="webkit">

6.2 Некоторые CSS в ie8 не поддерживаются

6.2.1 ie8 поддерживает:first-child, но не поддерживает:last-child. Потому что первый — это стандарт css2.1, а второй — стандарт css3.Рекомендуемая практика заключается в том, чтобы не использовать last-child, а установить класс .last для последнего элемента, а затем стилизовать его, чтобы все было совместимо.

6.2.2 html5shiv.js

IE8 не поддерживает новые теги HTML5, такие как<header>,<nav>и т. д. теги не могут отображаться в IE8. html5shiv.js может помочь браузерам IE6-8 быть совместимыми с семантическими тегами HTML5.

Как использовать: обратитесь к файлу html5shiv.js на странице. Он должен быть добавлен в элемент страницы, потому что браузер IE должен знать этот элемент до того, как он будет проанализирован, поэтому на этот js-файл нельзя ссылаться внизу страницы.

6.2.3. Respond.js

IE8 не поддерживает медиа-запросы CSS, что сильно вредит адаптивному дизайну. Respond.js помогает с совместимостью IE6-8"min/max-width"Критерии медиазапроса.

Как использовать: ссылка после ссылки на расположение всех файлов css на страницеRespond.js. а такжеRespond.jsЧем раньше цитирование, тем меньше шансов, что пользователи увидят мерцание страницы.

6.2.4. Схема совместимости блока шрифта CSS3 "rem":rem.js

В CSS3 представлена новая единица измерения размера шрифта rem, которая отличается от функции em «установки размера шрифта относительно его родительского элемента». текущие основные единицы. IE9+ начал поддерживать, IE8 можно поддерживать только введением библиотеки js.

Как использовать: обратитесь к файлу rem.js на странице. Ссылка должна быть в нижнем колонтитуле, который находится в конце , после всех ссылок на файлы css и элементы DOM.

6.2.5 Некоторые другие неподдерживаемые свойства:

закругленные углы с радиусом границы

тень коробки тень коробки

Градиент фона CSS3

7. Заполнитель

Версии ниже ie10- не поддерживаются (подсказки можно имитировать с помощью тега span).

По вопросам оптимизации css:

1. Не используйте подстановочные знаки, такие как *{}

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

2. Минимизируйте использование высокопроизводительных свойств, таких как абсолютное позиционирование и плавающее

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

3. Используйте наследование CSS, чтобы уменьшить объем кода

Мы знаем, что некоторые коды CSS могут быть унаследованы. Если родительский элемент задал стиль, дочернему элементу не нужно задавать стиль. Это также эффективный способ повысить производительность.

Общие наследуемые свойства, такие как:

цвет, размер шрифта, семейство шрифтов, выравнивание текста, высота строки и т. д.

Ненаследуемые, такие как:

позиция, дисплей, поплавок, дисплей, фон. ширина и так далее

4, CSS Sprites уменьшает HTTP-запрос

Маленькая иконка управляет положением фона по снежной карте по запросу.

5. Совместное написание css:

font

background

padding

margin

6. Не ограничивайте правила идентификации тегами или классами

Многие люди будут писать селекторы, такие как #test.info или div#test, которые можно только назвать излишними, id уже может найти элемент уникальным и самым быстрым способом.

7. Избегайте селекторов с подстановочными знаками

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

#header a {font-weight:blod;}

Большинство из нас привыкли читать слева направо, а также могут по привычке настроить браузер на соответствие правилам слева направо, поскольку предполагается, что накладные расходы на это правило невелики. Давайте представим, что браузер работает следующим образом: найдите единственный элемент с id header , а затем примените это правило стиля к элементу a в его непосредственных дочерних элементах. Мы знаем, что в документе есть только один элемент с идентификатором header, и у него всего несколько дочерних элементов типа a, поэтому этот селектор CSS должен быть достаточно эффективным.

На самом деле, наоборот, селекторы CSS сопоставляются справа налево. После понимания этого механизма кажущийся эффективным селектор в примере на практике имеет высокую стоимость сопоставления Браузер должен пройти все элементы на странице и определить, является ли идентификатор его родительского элемента заголовком.

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

#header a {font-weight:blod;}

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

Селекторы с подстановочными знаками представлены с помощью совпадения *, которое соответствует каждому элементу в документе. Следующий пример правила устанавливает размер шрифта всех элементов равным 20px:

* { font-size:20px;}

Селектор подстановочных знаков действует на все элементы, например подстановочный знак в крайнем правом углу правила:

.selected * {color: red;}

После того, как браузер сопоставляет все элементы в документе, он сопоставляет элементы с выбранным классом вплоть до корневого узла документа, поэтому накладные расходы на сопоставление очень велики, обычно на 1–3 порядка выше, чем у селектора ID с наименьшим накладные расходы, поэтому следует избегать правил, в которых ключевой селектор является селектором с подстановочными знаками.

8, чтобы избежать единого селектора атрибута правила

Селектор атрибута соответствует атрибуту элемента или его значению атрибута. Например, следующее правило установит красный цвет для элемента ссылки, значение атрибута herf которого равно "#index":

.selected [href="#index"] {цвет: красный;}

Однако накладные расходы на сопоставление очень велики: браузер сначала сопоставляет все элементы, проверяет, есть ли у них атрибут href и значение атрибута herf равно «#index», а затем сопоставляет элементы с выбранным классом до корневой узел документа. Поэтому избегайте использования правил, в которых селектор ключей является селектором атрибутов с одним правилом.

9. Избегайте селекторов атрибутов, подобных регулярным выражениям

CSS3 добавляет сложные селекторы атрибутов, которые могут сопоставлять значения атрибутов элементов способом, подобным регулярному выражению. Конечно, эти типы селекторов определенно повлияют на производительность, и сопоставление регулярных выражений будет намного медленнее, чем сопоставление на основе категорий. В большинстве случаев мы должны стараться избегать использования синтаксиса *=, |=, ^=, $= и ~= для селекторов атрибутов.

10. Удалите несовместимые стили:

Удаление несовпадающих стилей имеет два преимущества:

Во-первых, после удаления бесполезных стилей можно уменьшить размер файлов стилей и ускорить загрузку ресурсов;

Во-вторых, для браузеров все правила стилей будут проанализированы и проиндексированы, даже если на текущей странице нет соответствующих правил. Удалите несоответствующие правила, сократите элементы индекса и ускорьте поиск в браузере;