Jeśli istnieje podobieństwo, czuję się zaszczycony, jeśli zostanie wznowiony, proszę o wskazanie
Obejście, aby IE6, IE7, IE8, IE9, IE10 i IE11 wspierały Bootstrap
Niedawno założyłem stronę internetową. Zawsze uważałem, że bootstrap jest bardzo dobry. Tym razem użyłem bootstrap3, Chrome, Firefox, Safari, Opera, 360 (tryb prędkości), przeglądarka Sogou i inne przeglądarki nie mają problemów. Pod IE8 i IE11 zauważyłem, że styl nie może być wyświetlany. Potem różne Baidu. Wreszcie, dzięki postowi od internauty na Yapeng.com rozwiązały problem. Zobacz także Qianxun Learning Network. Rozwiązanie jest podsumowane następująco:
Po pierwsze, upewnij się, że Twoja strona HTML zaczyna się od deklaracji DOCTYPE. DOCTYPE informuje przeglądarkę, jakiej specyfikacji HTML lub XHTML użyć do parsowania dokumentu HTML, co wpływa na następujące czynniki:
Ograniczenia dotyczące tagów, atrybutów i właściwości
Wpływa na tryb renderowania przeglądarki, a różne tryby renderowania wpływają na analizę kodu CSS, a nawet skryptów Javascrip{filter}t
DOCTYPE jest kluczowy, a obecną najlepszą praktyką jest wpisywanie na pierwszej linii dokumentu HTML:
<!DOCTYPE html>
Istnieje kilka powodów, dla których można znaleźć bootstrap podsumowane w poście o bogu, przede wszystkim Bootstrap3 został opracowany na zasadzie urządzenia mobilnego, więc powody mogą być następujące:
1. Adres zdalny nie jest wywoływany poprawnie
To znaczy, jeśli jest to IE9 lub niższy, wywołaj dwa specjalne js
<!-- HTML5 Shim i Respond.js IE8 dla elementów HTML5 i zapytań medialnych — >
<!--[jeśli to 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]-->
Ale przetestowałem i okazało się, że samo użycie powyższych plików js nie jest wykonalne,
2. Metoda wywołania jest nieprawidłowa
Nie odwołuj się do plików respond.min.js, respond.js ani CSS w formie file:// ani @import
3. Identyfikacja zawartości przeglądarki (używanie metatagów do dostosowania metody renderowania przeglądarki)
Bootstrap nie obsługuje trybu kompatybilności z IE, a aby IE uruchamiał najnowszy tryb renderowania, na stronie zostaną dodane następujące tagi
IE=edge oznacza, że najnowsze jądro IE jest wymuszone, a chrome=1 oznacza, że jeśli wtyczka przeglądarki Google Chrome Frame dla IE6/7/8 i innych wersji jest zainstalowana (co może sprawić, że przeglądarka użytkownika nadal wygląda jak menu i interfejs IE, ale użytkownik faktycznie korzysta z jądra przeglądarki Chrome podczas przeglądania internetu), to jądro Chrome jest używane do renderowania. Szczegółowe wyjaśnienie tego metatagu znajdziesz w świetnej odpowiedzi na StackOverflow, a <meta>angielskie wyjaśnienie eksperta od tagów można znaleźć tutaj
http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge-e
Dodałem
<meta http-equiv="X-UA-Compatible" content="IE=9" />
I wtedy masz
Jądro kontroluje meta tag, ponieważ obecne główne przeglądarki w Chinach to podwójne jądra, więc meta tag jest dodawany, aby powiedzieć przeglądarce, którego jądra użyć do renderowania strony
4. IE8 nie obsługuje kilku właściwości kontenerów
IE8 nie obsługuje w pełni rozmiarowania pudełka: ramka jest używana z minimalną szerokością, maksymalną szerokością, minimalną wysokością lub maksymalną wysokością. W związku z tym klasa kontenera w bootstrap v3.0.1 nie używa już maksymalnej szerokości.
5.JS problem spowodowany kolejnością wprowadzania CSS
Musisz cytować css przed odwołaniem się do js
<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 ma puste linie przed i po
<!DOCTYPE html>
Nie wolno tu mieć odstępów, trzeba je usunąć
<html>
7. Możesz też ręcznie modyfikować bootstrap.css
Jeśli używasz bootstrap 2.1.1, modyfikacja navbar-inner{ filter:none} może rozwiązać problem, jeśli używasz wersji 3.0+, nie ma kodu, szczegóły znajdziesz w połączeniu
http://stackoverflow.com/questions/12460190/bootstrap-navbar-does-not-show-in-ie8
8. Użyj trybu quirków
Przy definiowaniu strony internetowej tryb kompatybilny wstecznie z starszymi przeglądarkami to tryb quirks, a odpowiadający mu "tryb standardowy" to tryb standardowy. Konkretnie, <!DOCTYPE html> jest napisany tak jak wcześniej
<!DOCTYPE HTML PUBLICZNE "-///W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Testowałem to, ale to niewykonalne
W końcu testowałem pod IE11, ale testowałem też pod IE8 i znalazłem problem, że placeholder nie jest obsługiwany
Oto jak rozwiązać problem wsparcia IE dla zastępczych plików
jquery wspomniany w tym artykule jest testowany w wersji 1.11.1, a jquery jest odwoływany jako pierwszy
<scrip{filter}t type="text/javascrip{filter}t" src="http://code.jquery.com/jquery-1.11.1.min.js"></scrip{filter}t>
Możesz też użyć innych wersji jquery
Następnie wprowadź <scrip{filter}t type="text/javascrip{filter}t" src="js/jquery.placeholder.js"></scrip{filter}t>
jquery.placeholder.js adres pobrania tego pliku https://github.com/mathiasbynens/jquery-placeholder
Następnie dodaj trochę kodu do pliku
<scrip{filter}t type="text/javascrip{filter}t">
$(funkcja () {
Wywołaj wtyczkę
$('input, textarea').placeholder();
});
</scrip{filter}t>
Jeśli jestem tu zaangażowany lub problem nadal pozostaje nierozwiązany, proszę przejść http://hustlzp.com/post/2014/01/ie8-compatibility więcej szczegółów
Powyższe testy IE6, 7, 8, 9, 10, 11, Chrome, Firefox, Safari, Opera, przeglądarka 360 (tryb prędkości), Sogou w przeglądarce zdały, tylko IE5.5 wydaje się niewykonalne, krótko mówiąc, problem został rozwiązany tutaj, całkiem zły IE6 – nazwijmy to sosem sojowym
Jeśli nie chcesz jquery.placeholder.js używać, nie możesz już wspierać implementacji emulacji zastępczej w przeglądarkach
Możesz sięgnąć po ten artykuł, aby uzyskać bardzo szczegółowe http://ju.outofmemory.cn/entry/1595 |
Opublikowano 03.08.2016 22:55:23
|
|
|
Ziemianin