Se c'è una somiglianza, sono onorato; se viene ristampato, vi prego di indicarlo
Soluzione alternativa per supportare IE6 IE7 IE8 IE9 IE10 IE11 Bootstrap
Ho creato recentemente un sito web, ho sempre pensato che Bootstrap fosse molto valido. Questa volta ho usato bootstrap3, Chrome, Firefox, Safari, Opera, il browser 360 (modalità velocità), il browser Sogou e altri browser non hanno avuto problemi. E sotto IE8 e IE11 ho scoperto che lo stile non poteva essere visualizzato, poi vari Baidu, infine, con l'aiuto di un post di utenti su Yapeng.com risolto il problema, riferisci anche Qianxun Learning Network La soluzione è riassunta come segue:
Per prima cosa, assicurati che la tua pagina HTML inizi con una dichiarazione DOCTYPE. DOCTYPE indica al browser quale specifica HTML o XHTML utilizzare per analizzare un documento HTML, il che influisce sui seguenti fattori:
Vincoli su attributi e proprietà dei tag
Influisce sulla modalità di rendering del browser, e diverse modalità di rendering influenzano l'analisi del codice CSS e persino degli script Javascrip{filter}t
DOCTYPE è fondamentale, e la buona pratica attuale è digitare sulla prima riga del documento HTML:
<!DOCTYPE html>
Ci sono diverse ragioni per trovare bootstrap riassunte nel post del dio; innanzitutto, Bootstrap3 è stato sviluppato sul principio del dispositivo mobile prima, quindi le ragioni possono essere le seguenti:
1. L'indirizzo remoto non viene chiamato correttamente
Cioè, finché è IE9 o inferiore, chiama due j speciali
<!-- supporto HTML5 Shim e Respond.js IE8 per elementi HTML5 e query media -->
<!--[se 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]-->
Ma ho testato e ho scoperto che usare solo i file js sopra non è fattibile,
2. Il metodo di chiamata è errato
Non fare riferimento a respond.min.js, respond.js o CSS in file:// o @import modulo
3. Identificare il contenuto del browser (usando meta tag per regolare il metodo di rendering del browser)
Il bootstrap non supporta la modalità di compatibilità IE e, affinché IE possa eseguire l'ultima modalità di rendering, verranno aggiunti i seguenti tag alla pagina
IE=edge significa che l'ultimo kernel IE è forzato, e chrome=1 significa che se il plug-in del browser Google Chrome Frame per IE6/7/8 e altre versioni è installato (che può far sembrare il browser dell'utente ancora il menu e l'interfaccia di IE, ma l'utente in realtà utilizza il kernel del browser Chrome mentre naviga sul web), allora il kernel Chrome viene usato per renderizzare. Per una spiegazione specifica di questo meta tag, vedi la grande risposta su StackOverflow, e la <meta>spiegazione in inglese del tag expert si trova qui
http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge-e
Ho aggiunto
<meta http-equiv="X-UA-Compatible" content="IE=9" />
E poi ecco che ci si va
Il kernel controlla il meta tag, perché i browser mainstream attuali in Cina sono dual kernel, quindi il meta tag viene aggiunto per indicare al browser quale kernel usare per renderizzare la pagina
4. IE8 non supporta diverse proprietà dei container
IE8 non supporta completamente la dimensione delle scatole: la scatola di bordo viene usata con larghezza minima, larghezza massima, altezza minima o altezza massima. Pertanto, la classe container in bootstrap v3.0.1 non utilizza più la larghezza massima.
5.JS problema causato dall'ordine in cui il CSS viene introdotto
Devi citare CSS prima di fare riferimento a 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 ha righe vuote prima e dopo
<!DOCTYPE html>
Non va bene avere spazi qui, devi rimuovere gli spazi
<html>
7. Puoi anche modificare manualmente il bootstrap.css
Se stai usando bootstrap 2.1.1, modificare navbar-inner{ filter:none} può risolvere il problema; se usi la versione 3.0+, non c'è codice, consulta la connessione per i dettagli
http://stackoverflow.com/questions/12460190/bootstrap-navbar-does-not-show-in-ie8
8. Usa la modalità quirk
Quando si definisce una pagina web, la modalità retrocompatibile con browser più vecchi è la modalità quirks, mentre la corrispondente "modalità standard" è la modalità standard. In particolare, <!DOCTYPE html> è scritto come prima
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Ho testato questo, ma non è fattibile
Alla fine ho testato con IE11, ma ho testato con IE8 e ho riscontrato un problema che il segnaposto non è supportato
Ecco come risolvere il supporto di IE ai segnaposto
Il jquery citato in questo articolo è testato in 1.11.1, e jquery viene citata per primo
<scrip{filter}t type="text/javascrip{filter}t" src="http://code.jquery.com/jquery-1.11.1.min.js"></scrip{filter}t>
Puoi anche usare altre versioni di jquery
Poi introduci <scrip{filter}t type="text/javascrip{filter}t" src="js/jquery.placeholder.js"></scrip{filter}t>
jquery.placeholder.js indirizzo di download per questo file https://github.com/mathiasbynens/jquery-placeholder
Poi aggiungi un po' di codice al file
<scrip{filter}t type="text/javascrip{filter}t">
$(funzione () {
Invoca il plugin
$('input, areatesto').segnaposto();
});
</scrip{filter}t>
Se sono coinvolto qui o se il problema è ancora irrisolto, vi prego di http://hustlzp.com/post/2014/01/ie8-compatibility maggiori dettagli
I test sopra sopra come IE6, 7, 8, 9, 9, 10, 11, Chrome, Firefox, Safari, Opera, 360 browser (modalità velocità), test Sogou browser superato, solo IE5.5 sembra non fattibile, in breve, il problema è risolto qui, tutti i malvagi IE6 - chiamatelo salsa di soia
Se non vuoi usare jquery.placeholder.js, non puoi più supportare implementazioni di emulazione segnaposto nei browser
Puoi consultare questo articolo per un http://ju.outofmemory.cn/entry/1595 molto dettagliato |
Pubblicato su 03/08/2016 22:55:23
|
|
|
Padrone di casa