Twitter Bootstrap 3 ile IE8 sorunu

228

Yeni Twitter Bootstrap'ı kullanarak bir site oluşturuyorum. Site iyi görünüyor ve IE8 dışındaki tüm gerekli tarayıcılarda çalışıyor.

IE8'de mobil sürümün öğelerini görüntülüyor gibi görünüyor, ancak masaüstümün tam ekranına uzanıyordu. Yaşadığım sorunun öncelikle Twitter önyüklemesinin mobil olması olduğuna inanıyorum. Bazı nedenlerden dolayı IE8 bu seçenek için gidiyor.

Ayrıca containersınıfın amaçlandığı gibi maksimum genişlik CSS özelliklerinde çekiyor gibi görünmüyor. Ne yaptığımı kimse görebilir mi?

<!-- Favicon -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- Bootstrap -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
<script src="/SiteFiles/js/modernizr.js"></script>

<!-- CSS -->
<link href="/SiteFiles/css/main.css" rel="stylesheet">

<header>
    <div class="topArea clearfix">
        <div class="container">
            <div class="topLinks">
                <div class="btn-group">
                    <span class="flag" data-toggle="dropdown">&nbsp;</span>
                    <ul class="dropdown-menu">
                        <li><a href="#">Country 1</a></li>
                        <li><a href="#">Country 2</a></li>
                        <li><a href="#">Country 3</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Country 4</a></li>
                        <li><a href="#">Country 5</a></li>
                        <li><a href="#">Country 6</a></li>
                    </ul>
                </div>
                <div class="visible-sm btn-group">
                    <div class="plus" data-toggle="dropdown"><i class="icon-plus icon-2x">&nbsp;</i></div>
                    <ul class="dropdown-menu">
                        <li><a href="#">Parts & Service</a></li>
                        <li><a href="#">Store Locator</a></li>
                        <li><a href="#">Find a Service Centre</a></li>
                        <li><a href="#">Parts List</a></li>
                        <li><a href="#">Tool Vibration</a></li>
                        <li><a href="#">Resource Centre</a></li>
                        <li><a href="#">Media Centre</a></li>
                        <li><a href="#">Register your Tools</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">
                            <button type="button" class="btn btn-default">Where to Buy</button></a></li>
                    </ul>
                </div>
                <div class="topNav">
                    <ul class="hidden-sm">
                        <li>
                            <div class="btn-group">
                                <a href="#" data-toggle="dropdown">Parts & Service</a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Store Locator</a></li>
                                    <li><a href="#">Find a Service Centre</a></li>
                                    <li><a href="#">Parts List</a></li>
                                    <li><a href="#">Tool Vibration</a></li>
                                </ul>
                            </div>
                        </li>
                        <li><a href="#">Resource Centre</a></li>
                        <li><a href="#">Media Centre</a></li>
                        <li><a href="#">Register your Tools</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">
                            <button type="button" class="btn btn-default">Where to Buy</button></a></li>
                    </ul>
                </div>
                <div class="searchArea">
                    <input type="text" />
                    <a href="#" class="goBtn">GO</a>
                </div>
            </div>
        </div>
    </div>
    <div class="mainNavArea">
        <div class="container rel">

            <div class="logo">
                <img src="/SiteFiles/img/logo.png" title="Milwaukee - Nothing but heavy duty" alt="Milwaukee - Nothing but heavy duty" />
            </div>
            <div class="navi">
                <div class="navbar">
                    <div class="container">

                        <!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>

                        <!-- Place everything within .navbar-collapse to hide it until above 768px -->
                        <div class="nav-collapse collapse navbar-responsive-collapse">
                            <ul class="nav nav-justified">
                                <li><span class="dropArrow">&nbsp;</span><span class="topNavPosition">Power Tools</span>

                                    <div class="navDrop">
                                        <div class="navDropInner">
                                            <div class="row">
                                                <div class="hidden-sm col-sm-4 col-lg-4">
                                                    <img src="/SiteFiles/img/drill.jpg" alt="" />
                                                </div>
                                                <div class="col-12 col-sm-8 col-lg-8">
                                                    <h2>Power Tools</h2>
                                                    <div class="row">
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Cutters</a>
                                                            <a href="#">Levels</a>
                                                            <a href="#">Pliers</a>
                                                            <a href="#">Saws</a>
                                                            <a href="#">Screwdrivers</a>
                                                        </div>
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Snips</a>
                                                            <a href="#">Utility Knives</a>
                                                            <a href="#">Combo Knives</a>
                                                            <a href="#">Hand Tool Accessories</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <a href="#" class="closeNav">X</a>
                                    </div>
                                </li>
                                <li><span class="dropArrow">&nbsp;</span><span class="topNavPosition">Hand Tools</span>

                                    <div class="navDrop">
                                        <div class="navDropInner">
                                            <div class="row">
                                                <div class="hidden-sm col-sm-4 col-lg-4">
                                                    <img src="/SiteFiles/img/drill.jpg" alt="" />
                                                </div>
                                                <div class="col-12 col-sm-8 col-lg-8">
                                                    <h2>Hand Tools</h2>
                                                    <div class="row">
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Cutters</a>
                                                            <a href="#">Levels</a>
                                                            <a href="#">Pliers</a>
                                                            <a href="#">Saws</a>
                                                            <a href="#">Screwdrivers</a>
                                                        </div>
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Snips</a>
                                                            <a href="#">Utility Knives</a>
                                                            <a href="#">Combo Knives</a>
                                                            <a href="#">Hand Tool Accessories</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <a href="#" class="closeNav">X</a>
                                    </div>
                                </li>
                                <li><span class="dropArrow">&nbsp;</span><span class="topNavPosition">Test & Measurement</span>

                                    <div class="navDrop">
                                        <div class="navDropInner">
                                            <div class="row">
                                                <div class="hidden-sm col-sm-4 col-lg-4">
                                                    <img src="/SiteFiles/img/drill.jpg" alt="" />
                                                </div>
                                                <div class="col-12 col-sm-8 col-lg-8">
                                                    <h2>Test & Measurement</h2>
                                                    <div class="row">
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Cutters</a>
                                                            <a href="#">Levels</a>
                                                            <a href="#">Pliers</a>
                                                            <a href="#">Saws</a>
                                                            <a href="#">Screwdrivers</a>
                                                        </div>
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Snips</a>
                                                            <a href="#">Utility Knives</a>
                                                            <a href="#">Combo Knives</a>
                                                            <a href="#">Hand Tool Accessories</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <a href="#" class="closeNav">X</a>
                                    </div>
                                </li>
                                <li><span class="dropArrow">&nbsp;</span><span class="topNavPosition">Accessories</span>

                                    <div class="navDrop">
                                        <div class="navDropInner">
                                            <div class="row">
                                                <div class="hidden-sm col-sm-4 col-lg-4">
                                                    <img src="/SiteFiles/img/drill.jpg" alt="" />
                                                </div>
                                                <div class="col-12 col-sm-8 col-lg-8">
                                                    <h2>Accessories</h2>
                                                    <div class="row">
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Cutters</a>
                                                            <a href="#">Levels</a>
                                                            <a href="#">Pliers</a>
                                                            <a href="#">Saws</a>
                                                            <a href="#">Screwdrivers</a>
                                                        </div>
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Snips</a>
                                                            <a href="#">Utility Knives</a>
                                                            <a href="#">Combo Knives</a>
                                                            <a href="#">Hand Tool Accessories</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <a href="#" class="closeNav">X</a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <!-- /.nav-collapse -->
                    </div>
                    <!-- /.container -->
                </div>
                <!-- /.navbar -->
            </div>

        </div>
    </div>
</header>
html  css  twitter-bootstrap  internet-explorer-8  twitter-bootstrap-3 
— wrayvon
kaynak
1
Hoşgeldiniz. Lütfen kodu soruya da gönderin. Bu, bağlantınızın artık çalışmadığı gelecek yıllarda bu soruya bakan herkese yardımcı olacaktır.
— Mark Chorley
1
Teşekkürler! Şimdi düzenledim, şerefe.
— wrayvon

Yanıtlar:

260

CSS'nizi CDN'den aldınız (bootstrapcdn.com) response.js sadece yerel dosyalar için çalışır. Yani web sitenizi IE8'de bootstrap.css dosyasının yerel bir kopyasıyla deneyin. Veya şunu okuyun: CDN / X-Domain Kurulumu

Not Ayrıca bkz: https://github.com/scottjehl/Respond/pull/206

Güncelleme:

Lütfen okuyun: http://getbootstrap.com/getting-started/#support

Ayrıca, Internet Explorer 8, medya sorgusu desteğini etkinleştirmek için response.js dosyasının kullanılmasını gerektirir.

Ayrıca bakınız: https://github.com/scottjehl/Respond

Bu nedenle temel şablon kafa bölümünde şu satırları içerir:

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="../../assets/js/html5shiv.js"></script>
  <script src="../../assets/js/respond.min.js"></script>
<![endif]-->
— Bass Jobsen
kaynak
Eğer geniş çaplıysam lütfen beni affet ... ama respond.js??
— Chris Kempen
6
Özür dilerim, saçma sorular gönderdikten sonra her zaman uygun çözümü buluyorum ... getbootstrap.com/getting-started adresine göz atın (özellikle "Internet Explorer 8 ve 9" bölümünde). :)
— Chris Kempen
1
Hangi dosyalar yerel olarak mevcut olmalıdır, hangileri CDN'den kullanılabilir? bootsrap.css, bootstrap.js, response.js, html5shiv.js dosyaları mı?
— trante
3
yerel bir answer.js yalnızca bootstrap'ın (aynı etki alanı) yerel kopyasıyla çalışır, buraya bakın github.com/scottjehl/Respond#cdnx-domain-setup
— Bass Jobsen
6
Ayrıca Respond.js'nin medya sorgularını içeren css dosyasından sonra tanımlanması gerektiğini unutmayın. Aksi takdirde,
— IE8'de
62

Ayrıca aşağıdaki META etiketini ayarlamam gerekiyordu:

<meta http-equiv="X-UA-Compatible" content="IE=edge">
— Damian
kaynak
<div class="left-finger-picker img-responsive">left-finger-picker.left-finger-picker { width: 200px; height: 210px; position : relative; background-size: cover; background-image : url("../myPics/leftHand.png"); background-repeat: no-repeat; background-size: contain; }
— Kullanıyorum
17

Bootstrap 2'den 3'e geçiş yaparken de aynı sorunu yaşadım. Navbar element tipinin 2'den 3'e değiştiğini kaçırmıştım. Bootstrap 2'de nav idi. Bootstrap 3'te artık başlık var. Bu yüzden sorunu tam olarak çözmek için

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Bunu css yükledikten hemen sonra koy:

<!--[if lt IE 9]>  
    <script src="~/Content/compatibility/html5shiv.js"></script>
    <script src="~/Content/compatibility/respond.min.js"></script>
<![endif]-->

ve sonra değiştir 

<nav class="navbar" role="navigation">
</nav>

için

<header class="navbar" role="navigation">
</header>

Oh ve iyi bir ölçü için de ekledim

<meta name="viewport" content="width=device-width, initial-scale=1.0">

çünkü Bootstrap sitesinin kendisi de buna sahip.

— Giles Roberts
kaynak
Ben kullanıyorum: <div class="left-finger-picker img-responsive">nerede bir görüntü göstermek için: left-finger-pickeraşağıdaki gibidir: .left-finger-picker { width: 200px; height: 210px; position : relative; background-size: cover; background-image : url("../myPics/leftHand.png"); background-repeat: no-repeat; background-size: contain; } ancak, IE8
— Hosein Aqajani
14

Benim durumumda, önyükleme CSS'yi küçültmek soruna neden oluyordu. Bootstrap 3.0.2'yi IE8'de (F12 Geliştirici Araçları kullanılarak öykünülmüş) yanıt vermek için yapmam gerekenler:

1 - X-UA-Uyumlu bayrağını ayarlayın.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

2 - bootstrap.min.css yerine küçültülmemiş bootstrap.css dosyasını kullanın

<link href="/css/bootstrap.css" rel="stylesheet" />

3 - response.js'yi (ve html5shiv.js) ekleyin

<!--[if lt IE 9]>
  <script src="/js/html5shiv.min.js"></script>
  <script src="/js/respond.min.js"></script>
<![endif]-->
— pedrusky
kaynak
Benim durumumda da, bootstrap küçültülmüş CSS IE8'de soruna neden oluyordu.
— hrvoj3e
Ben kullanıyorum: <div class="left-finger-picker img-responsive">nerede bir görüntü göstermek için: left-finger-pickeraşağıdaki gibidir: .left-finger-picker { width: 200px; height: 210px; position : relative; background-size: cover; background-image : url("../myPics/leftHand.png"); background-repeat: no-repeat; background-size: contain; } ancak, IE8
— Hosein Aqajani
6

respond.jssayfanın altına koy ancak bodyetiketi kapatmadan önce ve burada respond.jsyerel kodunuzda bu kodun bağlantısı ve çalıştırılması.

https://github.com/scottjehl/Respond

— jignesh kheni
kaynak
Bunun için teşekkürler, yine de bahsetmeyi unuttum, bu zaten plugins.js dosyama dahil edildi.
— wrayvon
Önemli olan , stil sayfalarından sonrarespond.js yüklenmesi gerektiğidir .
— piotr_cz
6

Her ihtimale karşı. Css dosyalarınızı yükledikten sonra IE özgü js dosyalarını yüklediğinizden emin olun.

— TenJack
kaynak
5

Sadece o alır <head>gibi css bağlantıları yerleştirmeyi unutmayın respond.js.

— Melek Yordanov
kaynak
5

Daha önce belirtildiği gibi iki farklı sorun vardır: 1) IE8 medya sorgularını desteklemez 2) etki alanları arası css dosyalarıyla birlikte kullanılan answer.js daha önce açıklandığı gibi dahil edilmelidir.

BootstrapCDN'yi kullanmak istiyorsanız, çalışan bir örnek:

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<!--[if lt IE 9]>
    <link href="https://stackoverflow.com//netdna.bootstrapcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />
    <link href="img/ie/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />
    <script src="js/ie/html5shiv.js"></script>
    <script src="js/ie/respond.min.js"></script>
    <script src="js/ie/respond.proxy.js"></script>
<![endif]-->

Ayrıca, yerel dizinlerde response.proxy.gif, response.min.js ve response.proxy.js kopyaladığınızdan emin olun

— Matteo Rossi
kaynak
4

Doğruladıktan sonra:

  • DOCTYPE
  • X-UA-Uyumlu meta etiket
  • Html5shiv.js ve response.js dosyasının dahil edilmesi (ve en son sürümlerin indirilmesi)
  • response.js yerel olarak
  • Siteyi Dosyadan değil, bir web sunucusundan barındırma
  • @İmport kullanılmıyor
  • ...

Yine de col-lg, col-md ve col-sm çalışmıyor. Son olarak, bootstrap referanslarını html5shiv.js ve response.js referanslarından önce olacak şekilde taşıdım ve hepsi işe yaradı.

İşte bir pasaj:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>Bootstrap Test for IE8</title>

    <!-- Moved these two lines up --> 
    <link href="includes/css/bootstrap.css" type="text/css" rel="stylesheet" />
    <script src="includes/js/bootstrap.js"></script>

    <!--[if lt IE 9]>
      <script src="includes/js/html5shiv.js"></script>
      <script src="includes/js/respond.min.js"></script>
    <![endif]-->    
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4" style="background-color:red;">col-md-4</div>
            <div class="col-md-8" style="background-color:green;">col-md-8</div>
        </div>
    </div>
</body>
</html>
— James Climer
kaynak
2
Sorunumu çözmek için bootstrap.min.css dosyasını burada önerildiği gibi taşımak gerekiyordu. Ben sadece .css dosyasını taşıdım, hala .js dosyası daha sonra yüklenir.
— Chad McGrath
Derlenmiş CSS dosyamı (Bootstrap dahil) html5shim'in üzerine taşımak ve yanıt vermek benim için bir çözümdü - teşekkürler
— Friendly Code
2

Açıklamadan IE8'in sizin için standart sürüm olduğunu ve content="IE=edge"sayfanın en yüksek modda oluşturulacağını söylüyor . Uyumlu olmasını sağlamak için olarak değiştirin content="IE=8".

IE8 modu, W3C Basamaklı Stil Sayfaları Düzey 2.1 Spesifikasyonu ve W3C Seçiciler API'sı; ayrıca W3C Basamaklı Stil Sayfaları Seviye 3 Spesifikasyonu (Çalışma Taslağı) ve diğer ortaya çıkan standartlar için sınırlı destek sağlar.

Kenar modu, Internet Explorer'a içeriği en yüksek modda görüntülemesini söyler. Internet Explorer 9 ile bu, IE9 moduna eşdeğerdir. Internet Explorer'ın gelecekteki bir sürümü daha yüksek bir uyumluluk modunu destekliyorsa, kenar moduna ayarlanmış sayfalar bu sürüm tarafından desteklenen en yüksek modda görünür. Internet Explorer 9 ile görüntülendiğinde aynı sayfalar IE9 modunda görünmeye devam eder.

Referans <meta http-equiv = "X-UA-Uyumlu" content = "IE = edge"> ne yapıyor?

— Dextere
kaynak
1

Eklemek gerekiyor - <meta http-equiv="X-UA-Compatible" content="IE=edge">

Bootstrap 3 kullanıyordum - yerelde IE üzerinde çalışıyordu.

Ben IE'de işe yaramadı canlı koymak.

Sadece Bootstrap şablonlarında bu kod satırını içermez, neden olduğundan emin değilim ama bunun W3C uyumlu olmaması olabilir.

— Getsomepeaches
kaynak
1

Bu sorun için bir düzeltmem var. Aslında IE7 ve 8, @media'yı düzgün bir şekilde desteklemez ve css'yi "col-md- *" sınıfları için kontrol ederseniz ve ortam genişliği 992 piksel olarak verilir. IE gibi yeni bir css dosyası oluşturun: IE.css ve koşullu yorumları ekleyin. Ve sonra sadece tasarımınız için gerekli sınıfları oradaki medya sorgularıyla doğrudan kopyalayın ve işiniz bitti.

— Denise
kaynak
0

Bootstrapv2'den v3'e geçerken aynı sorunu yaşadım.

(Benim gibi) eski spanX'i col-sm-X ile değiştirerek taşındıysanız da col-X sınıfları eklemeniz gerekir. col-X, herhangi bir @media bloğunun dışındaki stillerdir, bu nedenle medya sorgusu desteği olmadan çalışırlar.

Kap genişliğini düzeltmek için kendiniz bir @media bloğunun dışına ayarlayabilirsiniz. Gibi bir şey:

.container {
  max-width: @container-tablet;
}
@import "twitter-bootstrap/less/bootstrap";
— andyberry88
kaynak
Tamam, böylece col-X sınıfları mobil cihazlar için kullanıldığından% 100'ün sorunu çözmediğini öğrendik. Çizim tahtasına geri dön ...
— andyberry88
col-X sınıfları hiçbir zaman yığınlanmaz, bu nedenle çözümünüz küçük cihazlarda sorun yaşar. Ayrıca çözüm, medya sorgularına da bağlı olan @ grid-float-breakpoint ile ilgili sorunları çözmez, böylece navbar'ınız yatay olmaz. Ayrıca bakınız: stackoverflow.com/a/17920693/1596547
— Bass Jobsen
0

IE 10.0'da aynı sorunu yaşıyorum. Bu OP tam olarak sorun değil biliyorum, ama belki başkaları için yararlı olacaktır.

Benim durumumda, belgenin başında boş bir satır vardı:

[blank line]
<!DOCTYPE html>
<html lang="es">
...

Boş satır DOCTYPE ile etiket arasındaysa sorun da gösterilir:

<!DOCTYPE html>
[blank line]
<html lang="es">

Boş satırı kaldırdıktan ve sihirli X-UA-Uyumlu meta olmadan, IE 10 siteyi doğru bir şekilde oluşturmaya başladı.

PHP ve Smarty kullanıyorsanız Smarty yorumlarınıza dikkat edin, çünkü bu sorunlu boş satırları ekleyeceklerdir :-)

— Googol
kaynak
0

baş etiketim şöyle:

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Bootstrap core CSS -->
    <link href="css/modern-business.css" rel="stylesheet">
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="css/bootstrap.css" rel="stylesheet" media="screen">
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/modern-business.js"></script>
     <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
      <script src="js/respond.js"></script>
    <![endif]-->  
</head>

yerel olarak denemek istiyorsanız ... localhost üzerinden deneyin veya bir KG sunucusu oluşturun ve içeriği ayarlayın ve deneyin.

Bootstrap 3 için response.js'ye ihtiyacımız var ve sadece js'ye koyarsak ve başlıktaki html'ye eklersek yerel makinede çalışmaz. Erişim engellendi diyecektir. IE güvenlik kısıtlaması olduğu için yalnızca sunucu üzerinden çalışır. : P

— sandeepnpn
kaynak
0

Burada her yorumu okudum, her şeyi denedim .. ama Windows 7 - Internet Explorer 11 ( belge modu: IE8 ) ile çalışmak için alamadım .

Sonra bir belge modu (IE8) çalıştırmanın gerçek IE8 ile aynı olmadığını aklıma geldi, bu yüzden Windows Virtual PC ( Internet Explorer 8 ile Windows 7 ) ve tadaaaa yükledim ... bir cazibe gibi çalışıyor !

Bu kod parçası SADECE çalışmasını sağlamak için sayfanın altına koydum:

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</body>
</html>
— Sneeuw
kaynak
Respond.js ve proxy dosyaları da cdnjs.cloudflare.com adresinde barındırılmaktadır. dokümanlar / bağlantılar için cdnjs.com/libraries/respond.js adresine bir göz atın ve bootstrap 3.03 de orada barındırılıyor: cdnjs.com/libraries/twitter-bootstrap
— Troy Morehouse
0

Tıpkı bir başkan gibi. Aynı sorunu yaşadım ve yukarıdakilerin hiçbiri benim için düzeltmedi. Sonunda response.js'nin @import aracılığıyla başvurulan CSS'yi ayrıştırmadığını öğrendim . Ben tüm içine benim bootstrap.min.cssithal .@importmain.css

Bu nedenle, @import aracılığıyla başvurulan medya sorgularınızı içeren herhangi bir CSS'niz olmadığından emin olun .

— Alex Sutu
kaynak
0

Aşağıdaki adımları çözdüm.

(1) drupal 7 için Respond.js modülünü kurdu. (2) modül klasörü yerine kütüphanelerde ayarlanan drupal 7 için lessphp modülü. (3) (3.1)<meta http-equiv="X-UA-Compatible" content="IE=edge">

(3.2)

<!--[if lt IE 9]>
  <script src="js/html5shiv.js"></script>
<![endif]-->

Tema ayarından cdn bootstrap kullanarak.

Daha fazla bilgi edinmek için drupal tasarım ve geliştirme için web sitemin blogunu inceleyin www.devangsolanki.com

— user3471193
kaynak
1
Adım 1 ve 2 soru ile nasıl ilişkilidir? Sorun IE8 ve bootstrap ile ilgili. Drupal bu soruda bile geçmiyor.
— Adam Zuckerman
0

Bootstrap 3 kullanıyorsanız ve IE dışındaki diğer tarayıcılarda her şey yolunda giderse aşağıdakileri deneyin.

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
— vutbao
kaynak
Merhaba Phill Healy, gönderdiğim çözüm benim için çalıştı. Yorumunuz yapıcı değil. Yardım isterseniz daha fazla ayrıntı vermelisiniz
— vutbao
1
@vutbao bootstrap> IE8 sürümlerinde çalışır. IE8 içinde çalışmak istiyorsanız yanıtlar eklemeniz gerekir.Ama repondjs bootstrap CDN kullanıyorsanız ÇALIŞMAYACAKTIR. Bass Jobsen'in cevabını okumak için zaman ayırın.
— Wreeecks
@Vutbao, cevabınızın bu doğadaki tüm Bootstrap 3 sorunlarına kesin bir cevap olduğunu söylemek doğru değil. Ancak cevabınız böyle söylüyor. Bwaaaaaa'nın belirttiği gibi, dikkate alınması gereken birçok konu vardır. Örneğin başka bir sorun da belge tuhaflık modunda olabilir, vb.
— Phill Healey
Alınan nokta. İfadeler konusunda daha dikkatli olacağım. Teşekkürler
— vutbao 21:14
0

Bu çözümü kullanın 

<!--[if lt IE 9]>
<script src="js/css3-mediaqueries.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap-ie7.css" />
<![endif]-->

Bu dize <script src="js/css3-mediaqueries.js"></script>, medya sorgularını etkinleştirir. Bu dize <link rel="stylesheet" type="text/css" href="css/bootstrap-ie7.css" />önyükleme yazı tiplerini etkinleştirir.

Bootstrap 3.3.5 üzerinde test edildi

Mediaqieries.js dosyasını indirme bağlantısı . Bootstrap-ie7.css indirme bağlantısı

— AC1D
kaynak
0

Bootstrap kaynağını ayrı olarak bağladığınızdan emin olun

Stilleri derlerken açgözlü kullanırsanız LESSveya SASSaçgözlü değilseniz. Projemde dahil bootstrap.min.cssnedenle tüm stilleri için sadece tek bir istek olmalı - dosyanın üstüne, benim ana tarzında.

Ve bu nedenle, boostrap sınıfları düzgün çalışmadı. Ayrı olarak eklendiğinde, beklendiği gibi çalışır.

— Atais
kaynak
0

Aynı problemle karşılaştım, ilk cevabı denedim ama bir şey eksikti.

Webpack kullanıyorsanız, css'niz, response.js tarafından desteklenmeyen bir stil etiketi olarak yüklenecek, bir dosyaya ihtiyacı var, bu nedenle bootstrap'ın bir css dosyası olarak yüklendiğinden emin olun

Şahsen kullandım extract-text-webpack-plugin 

const webpack = require("webpack")
const ExtractTextPlugin = require("extract-text-webpack-plugin")
const path = require("path")

module.exports = {
    context: __dirname+"/src",
    entry: "./index.js",
    output: {
        filename: "./dist/bundle.js",
        path: __dirname
    },
    plugins: [
        ...,
        new ExtractTextPlugin("./dist/bootstrap.css", {
            allChunks: true
        })
    ],
    module: {
        loaders: [
            ...,
            // your css loader excluding bootstrap
            {
                test: /\.css$/,
                loader: "style!css",
                exclude: [
                    path.resolve(__dirname, "node_modules/bootstrap/dist/css/bootstrap.css")
                ]
            },

            {
                // loads bootstrap as a file, change path accordingly if needs be, path needs to be absolute
                include: [
                    path.resolve(__dirname, "node_modules/bootstrap/dist/css/bootstrap.css")
                ],
                loader: ExtractTextPlugin.extract("style-loader", "css-loader?minimize")
            }
        ]
    }
}

Umarım sana yardımcı olur

— Sami Triki
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.