Om det finns en likhet är jag hedrad, om det återpubliceras, vänligen ange
En lösning för att få IE6 IE7 IE8 IE9 IE10 IE11 att stödja Bootstrap
Jag har nyligen gjort en webbplats. Jag har alltid tyckt att bootstrap är väldigt bra. Den här gången använde jag bootstrap3, Chrome, Firefox, Safari, Opera, 360-webbläsaren (hastighetsläge), Sogou-webbläsaren och andra webbläsare utan problem. Under IE8 och IE11 upptäckte jag att stilen inte kunde visas. Sedan kom olika Baidu. Till slut löste Yapeng.com ett inlägg från nätanvändaren problemet. Se även Qianxun Learning Network Lösningen sammanfattas enligt följande:
Först, se till att din HTML-sida börjar med en DOCTYPE-deklaration. DOCTYPE talar om för webbläsaren vilken HTML- eller XHTML-specifikation som ska användas för att tolka ett HTML-dokument, vilket påverkar följande faktorer:
Begränsningar på taggar, attribut och egenskaper
Påverkar webbläsarens renderingsläge, och olika renderingslägen påverkar webbläsarens tolkning av CSS-kod och till och med JavaScript Javascrip{filter}t
DOCTYPE är avgörande, och nuvarande bästa praxis är att skriva på första raden i HTML-dokumentet:
<!DOCTYPE html>
Det finns flera anledningar till att hitta bootstrap sammanfattade i gudens inlägg, för det första utvecklades Bootstrap3 på principen om mobil enhet först, så orsakerna kan vara följande:
1. Den fjärranslutna adressen anropas inte korrekt
Det vill säga, så länge det är IE9 eller lägre, kalla två speciella js
<!-- HTML5 Shim och Respond.js IE8-stöd för HTML5-element och mediefrågor -->
<!--[om 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]-->
Men jag testade och upptäckte att det inte är möjligt att bara använda ovanstående js-filer,
2. Anropsmetoden är felaktig
Referera inte till respond.min.js-, respond.js- eller CSS-filer i file:// eller @import form
3. Identifiera webbläsarens innehåll (använda metataggar för att justera webbläsarens renderingsmetod)
Bootstrapen stöder inte IE-kompatibilitetsläget, och för att IE ska kunna köra det senaste renderingsläget kommer följande taggar att läggas till på sidan
IE=edge betyder att den senaste IE-kärnan tvingas, och chrome=1 betyder att om webbläsarpluginet Google Chrome Frame för IE6/7/8 och andra versioner installeras (vilket kan få användarens webbläsare att se fortfarande ut som IE:s meny och gränssnitt, men användaren använder faktiskt Chrome-webbläsarkärnan när hen surfar på webben), så används Chrome-kärnan för att rendera. För en specifik förklaring av denna metatagg, se det utmärkta svaret på StackOverflow, och den <meta>engelska förklaringen av taggexperten finns här
http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge-e
Jag lade till
<meta http-equiv="X-UA-Compatible" content="IE=9" />
Och där har du det
Kärnan styr metataggen, eftersom de nuvarande vanliga webbläsarna i Kina är dubbla kärnor, så metataggen läggs till för att tala om för webbläsaren vilken kärna som ska användas för att rendera sidan
4. IE8 stöder inte flera egenskaper hos containrar
IE8 stöder inte fullt ut boxstorlek: border-box används med min-width, max-width, min-height eller max-height. Därför använder containerklassen i bootstrap v3.0.1 inte längre max-width.
5.JS problem orsakat av ordningen i vilken CSS introduceras
Du måste ange CSS innan du refererar till JS
<länk rel="stilmall" typ="text/css" href="bootstrap.min.css" media="skärm"/>
<scrip{filter}t type="text/javascrip{filter}t" src="js/respond.min.js"></scrip{filter}t>
6. DOCTYPE har tomma rader före och efter
<!DOCTYPE html>
Det är inte okej att ha mellanrum här, du måste ta bort mellanrum
<html>
7. Du kan också modifiera bootstrap.css manuellt
Om du använder bootstrap 2.1.1 kan modifiering av navbar-inner{ filter:none} lösa problemet, om du använder version 3.0+ finns det ingen kod, se anslutningen för detaljer
http://stackoverflow.com/questions/12460190/bootstrap-navbar-does-not-show-in-ie8
8. Använd quirks-läget
När man definierar en webbsida är det läge som är bakåtkompatibelt med äldre webbläsare quirks-läget, och motsvarande "standardläge" är standardläge. Specifikt skrivs <!DOCTYPE html> som tidigare
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Jag testade detta, men det är inte genomförbart
Till slut testade jag under IE11, men testade under IE8 och hittade ett problem där platshållaren inte stöds
Så här löser du IE:s stöd för platshållare
Jquery som refereras i denna artikel testas i 1.11.1, och jquery refereras först
<scrip{filter}t type="text/javascrip{filter}t" src="http://code.jquery.com/jquery-1.11.1.min.js"></scrip{filter}t>
Du kan också använda andra jquery-versioner
Introducera sedan <scrip{filter}t type="text/javascrip{filter}t" src="js/jquery.placeholder.js"></scrip{filter}t>
jquery.placeholder.js nedladdningsadress för denna fil https://github.com/mathiasbynens/jquery-placeholder
Lägg sedan till lite kod i filen
<scrip{filter}t type="text/javascrip{filter}t">
$(funktion () {
Anropa pluginet
$('input, textarea').placeholder();
});
</scrip{filter}t>
Om jag är inblandad här eller om problemet fortfarande är olöst, vänligen http://hustlzp.com/post/2014/01/ie8-compatibility fler detaljer
Ovanstående IE6, 7, 8, 9, 10, 11, chrome, Firefox, Safari, Opera, 360-webbläsare (hastighetsläge), Sogou-webbläsartestet klarades, endast IE5.5 verkar inte genomförbart, kort sagt, problemet är löst här, allt ondskefullt IE6 – kalla det sojasås
Om du inte vill använda jquery.placeholder.js kan du inte längre stödja platshållaremuleringsimplementationer under webbläsare
Du kan läsa den här artikeln för en mycket detaljerad http://ju.outofmemory.cn/entry/1595 |
Publicerad på 2016-08-03 22:55:23
|
|
|
Hyresvärd