Интерфейс: Невозможно быть совместимым с IE, и невозможно быть совместимым с IE в этой жизни
БОСС: Дайте вам 50% прибавку к зарплате
Интерфейс: IE — лучший браузер, который я когда-либо использовал (искреннее лицо)
Когда ваша веб-страница использует новейшие популярные технологии (такие как React, CSS3, ES6/7 и т. д.), но должна быть совместима с браузером IE, ваше сердце на самом деле сжимается, но, в конце концов, IE существует так долго, и следует ожидать всего сразу Исчезнуть нереально, так что в качестве фронтенда с (мэй) погоней (бан) ищущим (фа) давайте посмотрим, как быть совместимым с IE (здесь рассматривается только IE11, от других антикварных версий IE рекомендуется отказаться).
React в настоящее время является самой популярной и наиболее используемой библиотекой внешнего интерфейса для написания внешних страниц (никто), поэтому мы в основном рассказываем, как обеспечить совместимость с IE11 в среде React.
Используйте самую высокую версию IE
React может работать в браузерах, поддерживающих синтаксис ES5, для чего требуется, чтобы версия IE была не ниже IE9. В некоторых системах Windows с более низкими версиями для отображения страницы по умолчанию используется механизм IE с более низкими версиями.Если страницу необходимо запустить с помощью ядра IE с более высокими версиями, на HTML-страницу необходимо добавить следующий код.
|
|
Таким образом, страница будет использовать самую последнюю версию движка IE в системе для загрузки страницы.здесь.
ES 6/7
Все больше и больше веб-страниц теперь используют синтаксис ES6.По сравнению с ES5, ES6 добавляет много новых функций и синтаксического сахара, что уменьшает некоторую путаницу синтаксиса оригинального JS, делает код более кратким и делает JS-разработчиков более эффективными.
React будет работать в браузерах с поддержкой ES5, включая IE9 и IE10, но если вы используете синтаксис ES6/7, вам потребуется проделать дополнительную работу, чтобы быть совместимым с IE11.
React Polyfill
Большинство разработчиков React проходятCreate React AppДля создания проекта используется инструмент создания шаблонов React, предоставленный Facebook, который удобен для новичков в React для быстрого создания проектов React.
В репозитории кода этого скаффолда есть несколько полифилов (которые можно понимать как своего рода патч, патч, который позволяет нормально работать устройствам или средам, не поддерживающим эту функцию), которые могут заставить проект React отлично работать в браузер ИЕ.
Функции
- служба поддержки
Promise
,async/await
- служба поддержки
window.fetch
- служба поддержки
Object.assign
- служба поддержки
Symbol
- служба поддержки
Array.from
Шаги для использования
- пройти через
npm install react-app-polyfill
Установить полифиллы - в файле ввода (обычно
src/index.js
) на первой строке импорта библиотеки
|
|
Подробнеездесь.
core-js
даже использоватьReact Polyfill
Ваш проект также может не работать в IE11, потому чтоReact Polyfill
Не поддерживает весь синтаксис ES6, в настоящее время мы можем выбрать другую стороннюю библиотеку.core-js, эта библиотека поддерживает в дополнение кReact Polyfill
Помимо функциональных характеристик (window.fetch не поддерживает),Он также поддерживает некоторые часто используемые API ES6/7/8, такие как array.includes, string.includes, string.startsWith и т. д., который отлично работает в браузерах, не поддерживающих эти функции.
Шаги для использования
- пройти через
npm install core-js
команда для установки - в файле ввода (обычно
src/index.js
) на первой строке импорта библиотеки
|
|
core-js
содержитReact Polyfill
Большая часть функционала (кроме window.fetch), поэтому обычно нет необходимости использовать обе библиотеки вместе, достаточно использоватьcore-js
Достаточно.
CSS-переменные
Функции переменных уже включены во многие препроцессоры CSS, такие как Less, Sass и т. д., но переменные уже поддерживаются в последнем синтаксисе CSS.
|
|
Хотя Microsoft уже поддерживает переменные CSS в браузере Edge, к сожалению, они по-прежнему не поддерживаются в IE 11. Если вы хотите запускать код с переменными CSS в IE 11, нам нужно ввестиcss-vars-ponyfillэта библиотека.
инструкции
- Сначала установите эту библиотеку командой
npm install css-vars-ponyfill
. - Затем вы можете импортировать эту библиотеку в файл записи.
|
|
css-vars-ponyfill
Переменные CSS в проекте будут преобразованы, а в IE11 они будут напрямую преобразованы в соответствующие значения переменных, чтобы проекты с переменными CSS могли выполняться в IE11.
Flexbox
Компоновка эластичных блоков Flexbox уже давно отсутствует и широко нравится разработчикам переднего плана.Теперь другие платформы используют этот метод компоновки, например React Native и т. д.
Flexbox поддерживается всеми браузерами... За исключением IE, IE поддерживается лишь частично из-за некоторых ошибок, которые невозможно исправить. Конкретные причины см.Can I Use.
Итак, как правильно запустить Flexbox в IE11? На этом этапе мы можем использовать некоторые приемы, чтобы наши специальные стили CSS работали только в IE.
На самом деле, для каждого браузера есть соответствующий селектор CSS, чтобы CSS запускался только в соответствующем браузере.Например, специальный селектор IE11 выглядит так:
|
|
Код CSS в этом селекторе действует только в браузере IE11 и не действует в других браузерах.
Существуют также специальные селекторы для IE10, перечисленные ниже:
|
|
Таким образом, мы можем точно настроить наш макет flexbox с некоторым кодом CSS, который будет выполняться только IE, чтобы достичь цели эффекта макета flexbox.
Более подробную информацию можно найти здесь:
- Separating Internet Explorer 10 and 11 via CSS Hacks
- CSS3 Media Query to target only Internet Explorer (from IE6 to IE11+), Firefox, Chrome, Safari and/or Edge
Суммировать
В этой статье рассказывается, как быть совместимым с браузерами IE11 с точки зрения HTML, JS и CSS, но это лишь некоторые из проблем, с которыми часто сталкивается автор. Конкретные проблемы будут подробно проанализированы, и я надеюсь, что студенты с соответствующим опытом оставит сообщение для обсуждения, спасибо.