Якщо є схожість, для мене це честь, якщо це буде перевидано — будь ласка, вкажіть
Обхідний шлях для забезпечення підтримки Bootstrap у IE6 IE7 IE8 IE9 IE10 IE11
Нещодавно створив вебсайт. Я завжди вважав, що bootstrap дуже хороший. Цього разу я використовував bootstrap3, Chrome, Firefox, Safari, Opera, браузер 360 (режим швидкості), браузер Sogou та інші браузери не мають проблем. А під IE8 та IE11 виявив, що стиль не можна відобразити. Потім різні Baidu. Нарешті, за допомогою допису в мережі Yapeng.com вирішили проблему. Також зверніться до Qianxun Learning Network. Розв'язок узагальнено так:
По-перше, переконайтеся, що ваша HTML-сторінка починається з оголошення DOCTYPE. DOCTYPE повідомляє браузеру, яку специфікацію HTML або XHTML використовувати для розбору HTML-документа, що впливає на такі фактори:
Обмеження на теги, атрибути та властивості
Впливає на режим рендерингу браузера, а різні режими рендерингу — на розбор CSS-коду браузером і навіть скриптів Javascrip{filter}t
DOCTYPE є критично важливим, і наразі найкращою практикою є друкування першого рядка HTML-документа:
<!DOCTYPE html>
Існує кілька причин пошуку Bootstrap, підсумованих у дописі бога: по-перше, Bootstrap3 був розроблений на принципі «мобільний пристрій перш за все», тому причини можуть бути такими:
1. Віддалена адреса викликається некоректно
Тобто, якщо це IE9 або нижче, викликайте два спеціальні j
<!-- HTML5 Shim і Respond.js IE8 підтримують елементи HTML5 та медіа-запити -->
<!--[якщо це IE 9]>
<scrip{filter}t src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></scrip{filter}t>
<scrip{filter}t src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.min.js"></scrip{filter}t>
<![endif]-->
Але я перевірив і з'ясував, що просто використовувати вищезгадані js-файли неможливо,
2. Метод виклику є неправильним
Не посилайтеся на respond.min.js, respond.js чи CSS-файли у file:// чи @import формі
3. Ідентифікація вмісту браузера (за допомогою мета-тегів для налаштування методу рендерингу браузера)
Bootstrap не підтримує режим сумісності з IE, і для того, щоб IE міг запустити останній режим рендерингу, на сторінку будуть додані наступні теги
IE=edge означає, що останнє ядро IE примусовується, а chrome=1 означає, що якщо встановлено браузерний плагін Google Chrome Frame для IE6/7/8 та інших версій (що може зробити браузер користувача все ще меню та інтерфейс IE, але користувач фактично використовує ядро браузера Chrome під час перегляду вебу), то ядро Chrome використовується для рендерингу. Для конкретного пояснення цього мета-тегу дивіться чудову відповідь на StackOverflow, а <meta>англійське пояснення експерта з тегів можна знайти тут
http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge-e
Я додав
<meta http-equiv="X-UA-Compatible" content="IE=9" />
І ось ти
Ядро керує мет-тегом, оскільки сучасні популярні браузери в Китаї мають подвійні ядра, тому мета-тег додається, щоб підказати браузеру, яке ядро використовувати для рендерингу сторінки
4. IE8 не підтримує кілька властивостей контейнерів
IE8 не повністю підтримує розміри коробок: використовується рамка-бокс з мінімальною шириною, максимальною шириною, мінімальною висотою або максимальною висотою. Тому клас контейнера у bootstrap v3.0.1 більше не використовує max-width.
5.JS проблема, спричинена порядком впровадження CSS
Перед тим, як посилатися на js, потрібно цитувати css
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" media="screen"/>
<scrip{filter}t type="text/javascrip{filter}t" src="js/respond.min.js"></scrip{filter}t>
6. DOCTYPE має порожні рядки до і після
<!DOCTYPE html>
Тут не можна мати проміжки, їх треба прибрати
<html>
7. Ви також можете модифікувати bootstrap.css вручну
Якщо ви використовуєте bootstrap 2.1.1, модифікація navbar-inner{ filter:none} може вирішити проблему, якщо ви використовуєте версію 3.0+, коду немає, будь ласка, дивіться з'єднання для деталей
http://stackoverflow.com/questions/12460190/bootstrap-navbar-does-not-show-in-ie8
8. Використовуйте режим квірків
При визначенні веб-сторінки режим, сумісний зі старими браузерами, називається режим квірків, а відповідний «стандартний режим» — стандартний режим. Зокрема, <!DOCTYPE html> написаний як і раніше
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Я тестував це, але це неможливо
Нарешті я перевірив під IE11, але під IE8 і знайшов проблему, що заповнювач не підтримується
Ось як вирішити питання підтримки заповнювачів у IE
jquery, на який посилається в цій статті, тестується у версії 1.11.1, і спочатку згадується jquery
<scrip{filter}t type="text/javascrip{filter}t" src="http://code.jquery.com/jquery-1.11.1.min.js"></scrip{filter}t>
Ви також можете використовувати інші версії jquery
Потім вводити <scrip{filter}t type="text/javascrip{filter}t" src="js/jquery.placeholder.js"></scrip{filter}t>
jquery.placeholder.js адресу для завантаження цього файлу https://github.com/mathiasbynens/jquery-placeholder
Потім додайте код до файлу
<scrip{filter}t type="text/javascrip{filter}t">
$(функція () {
Виклик плагіна
$('input, textarea').placeholder();
});
</scrip{filter}t>
Якщо я тут причетний або проблема досі не вирішена, будь ласка, оберіться http://hustlzp.com/post/2014/01/ie8-compatibility більше деталей
Вищезгадані IE6, 7, 8, 9, 10, 11, Chrome, Firefox, Safari, Opera, браузер 360 (швидкий режим), тест браузера Sogou пройшов, лише IE5.5 здається нереальним, коротко — проблема тут вирішена, весь злий IE6 — назвіть це соєвим соусом
Якщо ви не хочете використовувати jquery.placeholder.js, ви більше не можете підтримувати реалізацію емуляції заповнювачів у браузерах
Ви можете ознайомитися з цією статтею для дуже детального http://ju.outofmemory.cn/entry/1595 |
Опубліковано 03.08.2016 22:55:23
|
|
|
Орендодавець