Als er een overeenkomst is, voel ik me vereerd; als het wordt herdrukt, geef dan alstublieft aan
Workaround om IE6, IE7, IE8, IE9, IE10, IE11 Bootstrap te laten ondersteunen
Onlangs heb ik een website gemaakt. Ik heb altijd het gevoel gehad dat bootstrap erg goed is. Deze keer heb ik bootstrap3, Chrome, Firefox, Safari, Opera, 360 browser (snelheidsmodus) gebruikt, Sogou browser en andere browsers zonder problemen. En onder IE8 en IE11 vond ik dat de stijl niet getoond kon worden. Daarna verschillende Baidu. Uiteindelijk is het probleem opgelost met behulp van een bericht van een internetgebruiker over Yapeng.com opgelost. Zie ook Qianxun Learning Network. De oplossing wordt als volgt samengevat:
Zorg er eerst voor dat je HTML-pagina begint met een DOCTYPE-declaratie. DOCTYPE vertelt de browser welke HTML- of XHTML-specificatie moet worden gebruikt om een HTML-document te ontleden, wat de volgende factoren beïnvloedt:
Beperkingen op tags, attributen en eigenschappen
Beïnvloedt de renderingmodus van de browser, en verschillende rendermodi beïnvloeden de parsing van CSS-code en zelfs Javascrip{filter}t scripts in de browser
DOCTYPE is cruciaal, en de huidige beste praktijk is om op de eerste regel van het HTML-document te typen:
<!DOCTYPE html>
Er zijn verschillende redenen om bootstrap te vinden, samengevat in de post van de god; allereerst is Bootstrap3 ontwikkeld op basis van het principe van een mobiel apparaat, dus de redenen kunnen als volgt zijn:
1. Het externe adres wordt niet correct aangeroepen
Dat wil zeggen, zolang het IE9 of lager is, roep twee speciale j's aan
<!-- HTML5 Shim en Respond.js IE8-ondersteuning van HTML5-elementen en mediaqueries -->
<!--[als het in het midden van 9 is]>
<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]-->
Maar ik heb getest en ontdekt dat het gebruik van bovenstaande js-bestanden niet haalbaar is,
2. De call-methode is onjuist
Verwijs niet naar respond.min.js, respond.js of CSS-bestanden in file:// of @import vorm
3. Het identificeren van de inhoud van de browser (met behulp van meta-tags om de rendermethode van de browser aan te passen)
De bootstrap ondersteunt geen IE-compatibiliteitsmodus, en om IE de nieuwste renderingmodus te laten draaien, worden de volgende tags aan de pagina toegevoegd
IE=edge betekent dat de nieuwste IE-kernel geforceerd is, en chrome=1 betekent dat als de browserplug-in Google Chrome Frame voor IE6/7/8 en andere versies is geïnstalleerd (waardoor de browser van de gebruiker er nog steeds uitziet als IE-menu en interface, maar de gebruiker daadwerkelijk de Chrome-browserkernel gebruikt bij het surfen op het web), dan wordt de Chrome-kernel gebruikt om te renderen. Voor een specifieke uitleg van deze metatag, zie het geweldige antwoord op StackOverflow, en de <meta>Engelse uitleg van de tag expert is hier te vinden
http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge-e
Ik voegde eraan toe
<meta http-equiv="X-UA-Compatible" content="IE=9" />
En daar ga je
De kernel beheert de metatag, omdat de huidige mainstream browsers in China dual kernels zijn, dus wordt de metatag toegevoegd om de browser te vertellen welke kernel gebruikt moet worden om de pagina te renderen
4. IE8 ondersteunt niet verschillende eigenschappen van containers
IE8 ondersteunt box-size niet volledig: border-box wordt gebruikt met min-width, max-width, min-height of max-height. Daarom gebruikt de containerklasse in bootstrap v3.0.1 max-width niet meer.
5.JS probleem veroorzaakt door de volgorde waarin CSS wordt geïntroduceerd
Je moet CSS citeren voordat je JS raadpleegt
<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 heeft lege regels voor en na
<!DOCTYPE html>
Het is hier niet oké om spaties te hebben, je moet de spaties verwijderen
<html>
7. Je kunt de bootstrap.css ook handmatig aanpassen
Als je bootstrap 2.1.1 gebruikt, kan het aanpassen van navbar-inner{ filter:none} het probleem oplossen; als je versie 3.0+ gebruikt, is er geen code, zie de verbinding voor details
http://stackoverflow.com/questions/12460190/bootstrap-navbar-does-not-show-in-ie8
8. Gebruik quirks-modus
Bij het definiëren van een webpagina is de modus die achterwaarts compatibel is met oudere browsers de quirks-modus, en de bijbehorende "standaardmodus" is standaardmodus. Specifiek wordt <!DOCTYPE html> geschreven zoals voorheen
<!DOCTYPE HTML OPENBAAR "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Ik heb dit getest, maar het is niet haalbaar
Uiteindelijk testte ik onder IE11, maar onder IE8 en vond een probleem dat plaatsvervanger niet wordt ondersteund
Hier is hoe je de ondersteuning voor tijdelijke aanduidingen in IE kunt oplossen
De jquery waarnaar in dit artikel wordt verwezen, wordt getest in 1.11.1, en jquery wordt eerst genoemd
<scrip{filter}t type="text/javascrip{filter}t" src="http://code.jquery.com/jquery-1.11.1.min.js"></scrip{filter}t>
Je kunt ook andere jquery-versies gebruiken
Introduceer dan <scrip{filter}t type="text/javascrip{filter}t" src="js/jquery.placeholder.js"></scrip{filter}t>
jquery.placeholder.js downloadadres voor dit bestand https://github.com/mathiasbynens/jquery-placeholder
Voeg daarna wat code toe aan het bestand
<scrip{filter}t type="text/javascrip{filter}t">
$(functie () {
Roep de plugin aan
$('input, textarea').placeholder();
});
</scrip{filter}t>
Als ik hier betrokken ben of als het probleem nog steeds niet is opgelost, geef dan alsjeblieft http://hustlzp.com/post/2014/01/ie8-compatibility meer details
De bovenstaande IE6, 7, 8, 9, 10, 11, Chrome, Firefox, Safari, Opera, 360 browser (snelheidsmodus), Sogou browser test is geslaagd, alleen IE5.5 lijkt niet haalbaar, kortom, het probleem is hier opgelost, allemaal kwaadaardige IE6 - noem het sojasaus
Als je jquery.placeholder.js niet wilt gebruiken, kun je geen tijdelijke emulatie-implementaties meer ondersteunen onder browsers
Je kunt dit artikel raadplegen voor een zeer gedetailleerd http://ju.outofmemory.cn/entry/1595 |
Geplaatst op 03-08-2016 22:55:23
|
|
|
Huisbaas