Ha van hasonlóság, megtiszteltetés, ha újranyomtatják, kérem, jelezze
Megoldás, hogy az IE6, IE7, IE8, IE9, IE10, IE11, Bootstrap támogatást nyújtsanak
Nemrég készítettem egy weboldalt, mindig is úgy éreztem, hogy a bootstrap nagyon jó. Ezúttal bootstrap3, Chrome, Firefox, Safari, Opera, 360 böngésző (sebességmód) használtam, Sogou böngésző és más böngészők sem voltak problémák, és az IE8 és IE11 alatt azt találtam, hogy a stílus nem volt megjelenítve, majd különböző Baidu oldalak is megjelentek, végül egy netizen poszt segítségével Yapeng.com megoldották a problémát. Lásd a Qianxun Learning Networket is. A megoldás a következőképpen összefoglalható:
Először is győződj meg róla, hogy a HTML oldalad egy DOCTYPE deklarációval induljon. A DOCTYPE megmondja a böngészőnek, hogy milyen HTML vagy XHTML specifikációt használjon egy HTML dokumentum elemzéséhez, ami a következő tényezőket érinti:
Korlátozások a címkékre, attribútumokra és tulajdonságokra vonatkozóan
Hatással van a böngésző renderelési módjára, és a különböző renderelési módok befolyásolják a böngésző CSS kódjának és akár a Javascrip{filter}t szkripek elemzését is.
A DOCTYPE kritikus, és a jelenlegi legjobb gyakorlat az, hogy a HTML dokumentum első sorára gépeljünk:
<!DOCTYPE html>
Számos oka van annak, hogy a bootstrapot összefoglalva az isten bejegyzésében, először is, a Bootstrap3-at a mobil eszköz első elve fejlesztették ki, így az okok a következők lehetnek:
1. A távoli címet nem hívják helyesen
Vagyis amíg IE9 vagy alacsonyabb szinten van, hívjunk két speciális j-t
<!-- HTML5 Shim és Respond.js IE8 támogatja a HTML5 elemeket és média lekérdezéseket -->
<!--[ha 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]-->
De kipróbáltam, és kiderült, hogy a fenti js fájlok használata nem megvalósítható,
2. A hívás módszere helytelen
Ne hivatkozz respond.min.js, respond.js vagy CSS fájlokra file:// vagy @import formában
3. A böngésző tartalmának azonosítása (metacímkék segítségével módosítva a böngésző megjelenítési módszerét)
A bootstrap nem támogatja az IE kompatibilitási módot, és ahhoz, hogy az IE a legfrissebb renderelési módot futtassa, a következő címkéket adják hozzá az oldalon
Az IE=edge azt jelenti, hogy a legfrissebb IE magot kényszerítik, a chrome=1 pedig azt jelenti, hogy ha telepítik a böngészőbővítményt, a Google Chrome Frame-et IE6/7/8 és más verziókhoz (ami a böngésző továbbra is az IE menüjének és felületének tűnhet, de a felhasználó valójában a Chrome böngészőmagját használja a webes böngészéskor), akkor a Chrome magot használják a renderelésre. A meta tag konkrét magyarázatáért lásd a StackOverflow nagyszerű válaszát, és a tag <meta>szakértő angol magyarázata itt található
http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge-e
Hozzátettem
<meta http-equiv="X-UA-Compatible" content="IE=9" />
És akkor itt van
A kernel irányítja a meta címkét, mivel a jelenlegi kínai főáramú böngészők kettős kernelek, így a meta címkét azért adják hozzá, hogy megmondja a böngészőnek, melyik kernel segítségével renderelje az oldalt
4. Az IE8 nem támogatja több konténer tulajdonságot
Az IE8 nem támogatja teljes mértékben a dobozméretezést: a border-box min-width, max-width, min-height vagy max-height esetén használatos. Ezért a bootstrap v3.0.1 konténer osztálya már nem használja max-width-et.
5.JS probléma a CSS bevezetésének sorrendjéből adódó
A css-t kell idézni, mielőtt js-re hivatkoznál
<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. A DOCTYPE-ban üres sorok vannak előtte és után
<!DOCTYPE html>
Nem helyes, hogy itt van szóköz, el kell távolítani a tereket
<html>
7. A bootstrap.css manuálisan is módosíthatod
Ha bootstrap 2.1.1-et használsz, a navbar-inner{ filter:none} módosítása megoldhatja a problémát, ha a 3.0+ verziót használod, nincs kód, kérjük, nézd meg a kapcsolatot a részletekért
http://stackoverflow.com/questions/12460190/bootstrap-navbar-does-not-show-in-ie8
8. Használj különleges képességeket
Weboldal meghatározásakor, a régebbi böngészőkkel visszafelé kompatibilis mód a quirks mód, míg a megfelelő "standard mód" standard mód. Konkrétan a <!DOCTYPE html> úgy van írva, mint korábban
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Teszteltem ezt, de nem megvalósítható
Végül IE11-en teszteltem, de IE8-ban is teszteltem, és találtam egy problémát, hogy helykitöltő nem támogatott
Íme, hogyan oldhatjuk meg az IE helykitöltő támogatását
A cikkben hivatkozott jquery-t az 1.11.1-ben teszteljük, és először a jquery-t használják
<scrip{filter}t type="text/javascrip{filter}t" src="http://code.jquery.com/jquery-1.11.1.min.js"></scrip{filter}t>
Más jquery verziókat is használhatsz
Ezután vezessünk be <scrip{filter}t type="text/javascrip{filter}t" src="js/jquery.placeholder.js"></scrip{filter}t>
jquery.placeholder.js letöltési cím ehhez a fájlhoz https://github.com/mathiasbynens/jquery-placeholder
Ezután adj hozzá kódot a fájlhoz
<scrip{filter}t type="text/javascrip{filter}t">
$(function () {
Hívd fel a plugint
$('input, textarea').placeholder();
});
</scrip{filter}t>
Ha én is érintett vagyok itt, vagy ha a probléma még mindig megoldatlan, kérem, http://hustlzp.com/post/2014/01/ie8-compatibility további részleteket küldjön
A fenti IE6, 7, 8, 9, 10, 11, Chrome, Firefox, Safari, opera, 360 böngésző (sebességmód), Sogou böngészőteszt átment, csak az IE5.5 nem tűnik megvalósíthatónak, röviden: itt megoldódott a probléma, minden gonosz IE6 – nevezzük szójaszósznak
Ha nem akarsz jquery.placeholder.js-t használni, már nem tudod támogatni a helykitöltős emulációs megvalósításokat böngészők alatt
Nagyon részletes http://ju.outofmemory.cn/entry/1595 |
Közzétéve 2016. 08. 03. 22:55:23
|
|
|
Háziúr