Dacă există o asemănare, sunt onorat, iar dacă va fi reeditată, vă rog să indicați
Soluție pentru a face ca IE6 IE7 IE8 IE9 IE10 IE11 să suporte Bootstrap
Recent am creat un site web. Întotdeauna am considerat că bootstrap este foarte bun. De data aceasta am folosit bootstrap3, Chrome, Firefox, Safari, Opera, browserul 360 (modul de viteză), browserul Sogou și alte browsere nu au avut probleme. Iar sub IE8 și IE11 am constatat că stilul nu putea fi afișat. Apoi, mai mulți Baidu, în cele din urmă, cu ajutorul unei postări de internauți pe Yapeng.com au rezolvat problema. De asemenea, consultă Qianxun Learning Network Soluția este rezumată astfel:
În primul rând, asigură-te că pagina ta HTML începe cu o declarație DOCTYPE. DOCTYPE spune browserului ce specificație HTML sau XHTML să folosească pentru a analiza un document HTML, ceea ce influențează următorii factori:
Constrângeri asupra etichetelor, atribute și proprietăți
Afectează modul de randare al browserului, iar diferite moduri de redare influențează analiza codului CSS și chiar a scripturilor Javascrip{filter}t
DOCTYPE este esențial, iar cea mai bună practică actuală este să tastezi pe prima linie a documentului HTML:
<!DOCTYPE html>
Există mai multe motive pentru a găsi bootstrap rezumate în postarea zeului, în primul rând, Bootstrap3 a fost dezvoltat pe principiul dispozitivului mobil, deci motivele pot fi următoarele:
1. Adresa de la distanță nu este apelată corect
Adică, atâta timp cât este IE9 sau mai mic, apelează două j-uri speciale
<!-- suport HTML5 Shim și Respond.js IE8 pentru elemente HTML5 și interogări media -->
<!--[dacă lt 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]-->
Dar am testat și am constatat că folosirea doar a fișierelor js de mai sus nu este fezabilă,
2. Metoda de apel este incorectă
Nu faceți referire la respond.min.js, respond.js sau CSS în file:// sau @import formă
3. Identificarea conținutului browserului (folosind meta tag-uri pentru a ajusta metoda de randare a browserului)
Bootstrap-ul nu suportă modul de compatibilitate IE, iar pentru ca IE să ruleze cel mai recent mod de randare, următoarele etichete vor fi adăugate pe pagină
IE=edge înseamnă că cel mai recent nucleu IE este forțat, iar chrome=1 înseamnă că dacă plug-in-ul Google Chrome Frame pentru IE6/7/8 și alte versiuni este instalat (care poate face ca browserul utilizatorului să pară încă meniul și interfața IE, dar utilizatorul folosește de fapt nucleul browserului Chrome când navighează pe web), atunci nucleul Chrome este folosit pentru randare. Pentru o explicație specifică a acestui metatag, vezi răspunsul excelent de pe StackOverflow, iar <meta>explicația în engleză a expertului în etichete poate fi găsită aici
http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge-e
Am adăugat
<meta http-equiv="X-UA-Compatible" conținut="IE=9" />
Și apoi iată-l
Nucleul controlează eticheta meta, deoarece browserele principale actuale din China sunt nuclee duale, așa că eticheta meta este adăugată pentru a indica browserului ce nucleu să folosească pentru a randa pagina
4. IE8 nu suportă mai multe proprietăți ale containerelor
IE8 nu suportă complet dimensiunea cutiilor: cutia de margine este folosită cu lățimea minimă, lățimea maximă, înălțimea minimă sau înălțimea maximă. Prin urmare, clasa container din bootstrap v3.0.1 nu mai folosește lățimea maximă.
5.JS problemă cauzată de ordinea în care CSS este introdus
Trebuie să citezi css înainte să faci referire la 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 are linii goale înainte și după
<!DOCTYPE html>
Nu este în regulă să ai spații aici, trebuie să le elimini
<html>
7. De asemenea, poți modifica manual bootstrap.css
Dacă folosești bootstrap 2.1.1, modificarea navbar-inner{ filter:none} poate rezolva problema, dacă folosești versiunea 3.0+, nu există cod, te rugăm să vezi conexiunea pentru detalii
http://stackoverflow.com/questions/12460190/bootstrap-navbar-does-not-show-in-ie8
8. Folosește modul quirks
Când se definește o pagină web, modul compatibil retroactiv cu browserele mai vechi este modul Quirks, iar "modul standard" corespunzător este modul standard. Mai exact, <!DOCTYPE html> este scris ca înainte
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Am testat asta, dar nu este fezabil
În cele din urmă am testat sub IE11, dar am testat sub IE8 și am găsit o problemă că un înlocuitor nu este suportat
Iată cum poți rezolva suportul IE pentru placeholder-uri
Jquery menționat în acest articol este testat în 1.11.1, iar jquery este referențiat primul
<scrip{filter}t type="text/javascrip{filter}t" src="http://code.jquery.com/jquery-1.11.1.min.js"></scrip{filter}t>
Poți folosi și alte versiuni jquery
Apoi introduceți <scrip{filter}t type="text/javascrip{filter}t" src="js/jquery.placeholder.js"></scrip{filter}t>
jquery.placeholder.js adresa de descărcare pentru acest fișier https://github.com/mathiasbynens/jquery-placeholder
Apoi adaugă ceva cod în fișier
<scrip{filter}t type="text/javascrip{filter}t">
$(funcția () {
Invocă pluginul
$('input, textarea').placeholder();
});
</scrip{filter}t>
Dacă sunt implicat aici sau dacă problema rămâne nerezolvată, vă rog să http://hustlzp.com/post/2014/01/ie8-compatibility mai multe detalii
Testul de mai sus IE6, 7, 8, 9, 10, 11, Chrome, Firefox, Safari, Opera, 360 browser (mod viteză), testul Sogou browser a trecut, doar IE5.5 pare nefezabil, pe scurt, problema este rezolvată aici, toți IE6 răi - numiți-i sos de soia
Dacă nu vrei să folosești jquery.placeholder.js, nu mai poți suporta implementări de emulare temporară în browsere
Puteți consulta acest articol pentru o http://ju.outofmemory.cn/entry/1595 foarte detaliată |
Postat pe 03.08.2016 22:55:23
|
|
|
Proprietarul