Benzerlik varsa, onur duyuyorum, yeniden basılırsa lütfen belirtin
IE6, IE7, IE8, IE9, IE10, IE11, Bootstrap desteğini sağlamak için bir çözüm
Yakın zamanda bir web sitesi yaptım, her zaman bootstrap'ın çok iyi olduğunu düşünmüşümdür. Bu sefer bootstrap3,Chrome,Firefox,Safari,Opera,360 tarayıcı (hız modu) kullandım, Sogou tarayıcısı ve diğer tarayıcılar sorun yaşamamıştı, IE8 ve IE11 altında stilin görüntülenemediğini gördüm, sonra çeşitli Baidu kullanıcıları da Yapeng.com çevrimiçi paylaşımı sayesinde sorunu çözdüm. Ayrıca Qianxun Öğrenme Ağı'na da bakabilirsiniz Çözüm şu şekilde özetlenmiştir:
Öncelikle, HTML sayfanızın bir DOCTYPE bildirisiyle başladığından emin olun. DOCTYPE, tarayıcıya bir HTML belgesini ayrıştırmak için hangi HTML veya XHTML spesifikasyonunun kullanılacağını söyler ve bu aşağıdaki faktörleri etkiler:
Etiketler, özellikler ve özellikler üzerindeki kısıtlamalar
Tarayıcının render modunu etkiler ve farklı render modları tarayıcının CSS kodunu ve hatta Javascrip{filter}t betiklerini ayrıştırmasını etkiler
DOCTYPE kritik bir sistemdir ve mevcut en iyi uygulama HTML belgesinin ilk satırına yazmaktır:
<!DOCTYPE html>
Bootstrap'ı bulmanın birkaç nedeni var; tanrının yazısında özetlenmiş, öncelikle Bootstrap3 mobil cihaz önceliği ilkesiyle geliştirilmiştir, bu yüzden nedenler şu olabilir:
1. Uzak adres doğru çağrılmıyor
Yani, IE9 veya daha düşük olduğu sürece, iki özel js çağırın
<!-- HTML5 Shim ve IE8'in HTML5 öğeleri ve medya sorguları desteği Respond.js -->
<!--[eğer 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]-->
Ama test ettim ve yukarıdaki js dosyalarını kullanmanın mümkün olmadığını gördüm,
2. Çağrı yöntemi yanlışdır
respond.min.js, respond.js veya CSS dosyalarına file:// veya @import biçiminde referans vermeyin
3. Tarayıcının içeriğini tanımlamak (tarayıcının render yöntemini ayarlamak için meta etiketler kullanmak)
Önyükleme IE uyumluluk modunu desteklemez ve IE'nin en son render modunu çalıştırabilmesi için sayfaya aşağıdaki etiketler eklenir
IE=edge, en son IE çekirdeğinin zorunlu olduğu anlamına gelir ve chrome=1, IE6/7/8 ve diğer sürümler için Google Chrome Frame eklentisi yüklüyorsa (bu, kullanıcının tarayıcısının hâlâ IE'nin menüsü ve arayüzü gibi görünmesini sağlayabilir, ancak kullanıcı web'de gezinirken aslında Chrome tarayıcı çekirdeğini kullanıyor), Chrome çekirdeği render için kullanılır. Bu meta etiketin özel açıklaması için StackOverflow'daki harika cevaba bakınız ve <meta>etiket uzmanının İngilizce açıklaması burada bulunabilir
http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge-e
Ekledim
<meta http-equiv="X-UA-Compatible" content="IE=9" />
Ve işte işte
Çekirdek, meta etiketi kontrol eder, çünkü Çin'deki mevcut ana akım tarayıcılar çift çekirdeklidir, bu yüzden meta etiket eklenerek tarayıcıya sayfayı render etmek için hangi çekirdeği kullanacağını söylemek için eklenir
4. IE8, konteynerlerin birkaç özelliğini desteklemez
IE8 kutu boyutlandırmasını tam olarak desteklemez: border-box minimum genişlik, maksimum genişlik, minimum yükseklik veya maksimum yükseklik ile kullanılır. Bu nedenle, bootstrap v3.0.1'deki konteyner sınıfı artık max-width kullanmaz.
5.JS sorun, CSS'nin tanıtılma sırasından kaynaklanıyor
js'ye referans vermeden önce css'den alıntı yapmanız gerekiyor
<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'da önce ve sonra boş satırlar var
<!DOCTYPE html>
Burada boşluk koymak uygun değil, boşlukları kaldırmanız gerekiyor
<html>
7. bootstrap.css manuel olarak da değiştirebilirsiniz
Eğer bootstrap 2.1.1 kullanıyorsanız, navbar-inner{ filter:none} modunu değiştirmek sorunu çözebilir, eğer sürüm 3.0+ kullanıyorsanız kod yoksa, lütfen bağlantıya bakınız, detaylar için bağlantıya bakınız
http://stackoverflow.com/questions/12460190/bootstrap-navbar-does-not-show-in-ie8
8. Quirk modunu kullanın
Bir web sayfası tanımlanırken, eski tarayıcılarla geriye doğru uyumlu olan mod quirks modudur ve karşılık gelen "standart mod" standart moddur. Özellikle, <!DOCTYPE html> önceki gibi yazılır
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Bunu test ettim ama mümkün değil
Son olarak IE11 altında test ettim, ama IE8 altında test ettim ve yer tutucu desteklenmediği sorunu buldum
İşte IE'nin yer tutuculara verdiği desteği nasıl çözülebileceğine dair
Bu makalede referans verilen jquery 1.11.1'de test ediliyor ve önce jquery referans alınıyor
<scrip{filter}t type="text/javascrip{filter}t" src="http://code.jquery.com/jquery-1.11.1.min.js"></scrip{filter}t>
Diğer jquery versiyonlarını da kullanabilirsiniz
Sonra <scrip{filter}t type="text/javascrip{filter}t" src="js/jquery.placeholder.js"></scrip{filter}t ekleyin>
jquery.placeholder.js dosyanın indirme adresi https://github.com/mathiasbynens/jquery-placeholder
Sonra dosyaya biraz kod ekleyin
<scrip{filter}t type="text/javascrip{filter}t">
$(fonksiyon () {
Eklentiyi çağır
$('input, textarea').placeholder();
});
</scrip{filter}t>
Eğer ben de buradaysam ya da sorun hâlâ çözülmemişse, lütfen daha fazla detay http://hustlzp.com/post/2014/01/ie8-compatibility hareket ettirin
Yukarıdaki IE6, 7, 8, 9, 10, 11, chrome, firefox, safari, opera, 360 tarayıcı (hız modu), Sogou tarayıcı testi geçti, sadece IE5.5 mümkün görünmüyor, kısaca sorun burada çözüldü, tüm kötü IE6 - buna soya sosu diyelim
jquery.placeholder.js kullanmak istemiyorsanız, tarayıcılar altında yer tutucu emülasyon uygulamalarını artık destekleyemezsiniz
Çok detaylı bir http://ju.outofmemory.cn/entry/1595 için bu makaleye başvurabilirsiniz |
Yayınlandı 3.08.2016 22:55:23
|
|
|
Ev sahibi