Problem z IE8 z Twitter Bootstrap 3

228

Tworzę witrynę przy użyciu nowego Twitter Bootstrap. Strona wygląda dobrze i działa we wszystkich wymaganych przeglądarkach oprócz IE8.

W IE8 wydaje się, że wyświetla elementy wersji mobilnej, ale rozciąga się na pełnym ekranie mojego pulpitu. Uważam, że mam problem z tym, że najpierw bootstrap na Twitterze jest mobilny. Z jakiegoś powodu IE8 wybiera tę opcję.

Zauważam również, że containerklasa nie wydaje się pobierać właściwości CSS o maksymalnej szerokości zgodnie z przeznaczeniem. Czy ktoś może zobaczyć, co zrobiłem źle?

<!-- 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
źródło
1
Witamy. Proszę również zamieścić kod w pytaniu. Pomoże to każdemu, kto przyjrzy się temu pytaniu w przyszłych latach, gdy Twój link przestanie działać.
— Mark Chorley,
1
Dzięki! Zredagowałem to teraz, na zdrowie.
— wrayvon

Odpowiedzi:

260

Otrzymałeś swój CSS z CDN (bootstrapcdn.com) respond.js działa tylko dla plików lokalnych. Więc wypróbuj swoją stronę na IE8 z lokalną kopią bootstrap.css. Lub przeczytaj: Konfiguracja CDN / X-Domain

Uwaga Zobacz także: https://github.com/scottjehl/Respond/pull/206

Aktualizacja:

Proszę przeczytać: http://getbootstrap.com/getting-started/#support

Ponadto program Internet Explorer 8 wymaga użycia pliku answer.js, aby włączyć obsługę zapytań o media.

Zobacz także: https://github.com/scottjehl/Respond

Z tego powodu podstawowy szablon zawiera następujące wiersze w sekcji nagłówka:

<!-- 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
źródło
Proszę wybacz mi, jeśli jestem tępy ... ale respond.js??
— Chris Kempen,
6
Przepraszam, zawsze wydaje mi się, że znajduję odpowiednie rozwiązanie po opublikowaniu absurdalnych pytań ... sprawdź getbootstrap.com/getting-started (szczególnie w sekcji „Internet Explorer 8 i 9”). :)
— Chris Kempen
1
Które pliki powinny istnieć lokalnie, które można wykorzystać z CDN? Pliki bootsrap.css, bootstrap.js, respond.js, html5shiv.js?
— trante
3
lokalna odpowiedź.j.j działa tylko z lokalną kopią bootstrap (ta sama domena), patrz tutaj github.com/scottjehl/Respond#cdnx-domain-setup
— Bass Jobsen
6
Należy również pamiętać, że plik Respond.js musi zostać zdefiniowany po pliku css, który zawiera zapytania o media. W przeciwnym razie nie będą przetwarzane w IE8
— helios456
62

Musiałem także ustawić następujący tag META:

<meta http-equiv="X-UA-Compatible" content="IE=edge">
— Damian
źródło
Używam: <div class="left-finger-picker img-responsive">do wyświetlenia obrazu, w którym: left-finger-pickerwygląda następująco: .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; } jednak nie reaguje w IE8
— Hosein Aqajani
17

Miałem ten sam problem podczas przechodzenia z Bootstrap 2 do 3. Już dostałem respond.js i html5shiv.js i ustawiłem meta na edge. Przegapiłem, że z 2 do 3 zmienił się typ elementu paska nawigacyjnego. W Bootstrap 2 była to nawigacja. W Bootstrap 3 jest teraz nagłówkiem. Aby w pełni rozwiązać problem, musiałem

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

Umieść to zaraz po załadowaniu mojego css:

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

a następnie zmienić 

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

do

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

Aha i dla pewności dodałem również

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

po prostu dlatego, że to właśnie ma sama strona Bootstrap.

— Giles Roberts
źródło
Używam: <div class="left-finger-picker img-responsive">do wyświetlenia obrazu, w którym: left-finger-pickerwygląda następująco: .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; } jednak nie reaguje w IE8
— Hosein Aqajani
14

W moim przypadku przyczyną problemu był zminimalizowany CSS bootstrap. Aby bootstrap 3.0.2 był responsywny w IE8 (emulowany za pomocą F12 Developer Tools) musiałem:

1 - Ustaw flagę zgodną z X-UA.

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

2 - Użyj niezminimalizowanego bootstrap.css, zamiast bootstrap.min.css

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

3 - Dodaj plik answer.js (i html5shiv.js)

<!--[if lt IE 9]>
  <script src="/js/html5shiv.min.js"></script>
  <script src="/js/respond.min.js"></script>
<![endif]-->
— pedrusky
źródło
W moim przypadku również CSS zminimalizowany przez bootstrap powodował problem w IE8.
— hrvoj3e
Używam: <div class="left-finger-picker img-responsive">do wyświetlenia obrazu, w którym: left-finger-pickerwygląda następująco: .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; } jednak nie reaguje w IE8
— Hosein Aqajani
6

umieść respond.jsna dole strony, ale przed zamknięciem bodytagu, a tutaj jest link respond.jsi uruchom ten kod na swoim lokalnym serwerze.

https://github.com/scottjehl/Respond

— jignesh kheni
źródło
Dzięki za to, zapomniałem wspomnieć, że jest to już zawarte w moim pliku plugins.js.
— wrayvon
Ważną rzeczą jest to, że respond.jspowinny być ładowane po arkuszach stylów.
— piotr_cz
6

W razie czego. Upewnij się, że załadowałeś pliki js specyficzne dla IE po załadowaniu plików css.

— TenJack
źródło
5

Jak już wcześniej wspomniano, istnieją dwa różne problemy: 1) IE8 nie obsługuje zapytań o media 2) Odpowiedź.js używana w połączeniu z plikami css między domenami musi zostać dołączona jak opisano wcześniej.

Jeśli chcesz użyć BootstrapCDN, oto działający przykład:

<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]-->

Upewnij się także, że skopiowałeś respond.proxy.gif, answer.min.js i response.proxy.js w lokalnych katalogach

— Matteo Rossi
źródło
4

Po weryfikacji:

  • DOCTYPE
  • Metatag zgodny z X-UA
  • Uwzględnienie html5shiv.js i respond.js (oraz pobieranie najnowszych wersji)
  • Odpowiedź.js jest lokalna
  • Witryna hostowana z serwera WWW, a nie z pliku: //
  • Nie używa @import
  • ...

Nadal col-lg, col-md i col-sm nie działały. W końcu przeniosłem referencje na bootstrap, aby były przed referencjami do html5shiv.js i answer.js i wszystko działało.

Oto fragment:

<!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
źródło
2
Przeniesienie bootstrap.min.css zgodnie z zaleceniami tutaj było konieczne do rozwiązania mojego problemu. Przesunąłem tylko plik .css, plik .js nadal ładuje się później.
— Chad McGrath
Przeniesienie mojego skompilowanego pliku CSS (w tym Bootstrap) powyżej html5shim i odpowiedź było dla mnie rozwiązaniem - dzięki
— Friendly Code
2

Z wyjaśnienia wynika, że ​​IE8 jest standardową wersją dla ciebie, a wykonanie content="IE=edge"spowoduje, że strona będzie wyświetlana w najwyższym trybie. Aby był kompatybilny, zmień na content="IE=8".

Tryb IE8 obsługuje wiele ustalonych standardów, w tym specyfikację kaskadowych arkuszy stylów W3C poziomu 2.1 oraz interfejs API Selektorów W3C; zapewnia także ograniczoną obsługę specyfikacji kaskadowych arkuszy stylów W3C poziomu 3 (robocza wersja robocza) i innych nowych standardów.

Tryb krawędzi informuje program Internet Explorer, aby wyświetlał zawartość w najwyższym dostępnym trybie. W przypadku przeglądarki Internet Explorer 9 jest to odpowiednik trybu IE9. Jeśli w przyszłej wersji programu Internet Explorer obsługiwany będzie tryb wyższej zgodności, strony ustawione na tryb krawędzi pojawią się w trybie najwyższym obsługiwanym przez tę wersję. Te same strony nadal pojawiałyby się w trybie IE9 podczas przeglądania w Internet Explorerze 9.

Odwołanie Co robi <meta http-equiv = "X-UA-Compatible" content = "IE = edge">?

— Dextere
źródło
1

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

Używałem Bootstrap 3 - działał w IE na moim komputerze lokalnym.

Podałem, że na żywo nie działa w IE.

Po prostu Bootstrap nie zawiera tej linii kodu w swoich szablonach, nie jestem pewien dlaczego, ale może to być spowodowane tym, że nie jest kompatybilny z W3C.

— Getsomepeaches
źródło
1

Mam naprawę tego problemu. W rzeczywistości IE7 i 8 nie obsługują poprawnie @media i jeśli sprawdzisz css dla klas „col-md- *”, a szerokość jest podana w szerokości mediów 992px. Wystarczy utworzyć nowy plik css IE, np .: IE.css i dodać komentarze warunkowe. A następnie po prostu skopiuj klasy wymagane dla twojego projektu bezpośrednio z wszelkimi zapytaniami o media i gotowe.

— Denise
źródło
0

Miałem dokładnie ten sam problem podczas migracji z bootstrapv2 do v3.

Jeśli (podobnie jak ja) przeprowadziłeś migrację, zastępując stary spanX kol-sm-X, musisz również dodać klasy col-X. col-X to style, które znajdują się poza blokami @media, więc działają bez obsługi zapytań o media.

Aby naprawić szerokość pojemnika, możesz ustawić go samodzielnie poza blokiem @media. Coś jak:

.container {
  max-width: @container-tablet;
}
@import "twitter-bootstrap/less/bootstrap";
— andyberry88
źródło
Ok, więc odkryłem, że nie rozwiązuje to w 100% problemu, ponieważ klasy col-X są następnie używane na urządzeniach mobilnych. Powrót do deski kreślarskiej ...
— andyberry88
Klasy col-X nigdy się nie nakładają, więc Twoje rozwiązanie będzie miało problemy na małych urządzeniach. Rozwiązanie nie rozwiązuje również problemów z punktem przerwania @ grid-float, który zależy również od zapytań o media, więc pasek nawigacyjny nie będzie się poziomo. Zobacz także: stackoverflow.com/a/17920693/1596547
— Bass Jobsen
0

Mam ten sam problem w IE 10.0. Wiem, że nie jest to dokładnie problem w PO, ale być może przyda się innym.

W moim przypadku na początku dokumentu był pusty wiersz:

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

Jeśli pusta linia znajduje się między DOCTYPE a tagiem, problem jest również wyświetlany:

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

Po usunięciu pustej linii i bez magicznej meta kompatybilnej z X-UA, IE 10 zaczął poprawnie renderować stronę.

Jeśli używasz PHP i Smarty, uważaj na komentarze Smarty, ponieważ dodadzą one te problematyczne puste wiersze :-)

— Googol
źródło
0

mój tag głowy jest taki:

<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>

jeśli chcesz spróbować w lokalnym ... spróbuj przez localhost lub utwórz serwer kontroli jakości i ustaw zawartość i spróbuj.

Potrzebujemy answer.js dla bootstrap 3 i nie będzie działał na komputerze lokalnym, jeśli po prostu umieścimy go w js i dołączymy do html w nagłówku. Powie, że odmowa dostępu. działa tylko przez serwer, ponieważ IE ma ograniczenia bezpieczeństwa. : P

— sandeepnpn
źródło
0

Przeczytałem tutaj każdy komentarz, próbowałem wszystkiego ... ale nie mogłem go uruchomić z Windows 7 - Internet Explorer 11 ( z trybem dokumentu: IE8 ).

Potem przyszło mi do głowy, że tryb dokumentu (IE8) to nie to samo, co prawdziwy IE8, więc zainstalowałem Windows Virtual PC ( Windows 7 z Internet Explorer 8 ) i tadaaaa ... to działa jak urok!

Umieściłem ten fragment kodu JUST na dole strony, aby działał:

<!-- 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
źródło
Pliki Respond.js i pliki proxy są również hostowane na stronie cdnjs.cloudflare.com. sprawdź cdnjs.com/libraries/respond.js dla docs / links, a bootstrap 3.03 jest tam również hostowany: cdnjs.com/libraries/twitter-bootstrap
— Troy Morehouse
0

Tak jak heads up. Miałem ten sam problem i żadne z powyższych nie rozwiązało go dla mnie. W końcu dowiedziałem się, że respond.js nie analizuje CSS, do którego odwołuje się @import . Całość została bootstrap.min.csszaimportowana @importdo mojegomain.css .

Upewnij się więc, że nie masz CSS, który zawiera zapytania o media, do których odwołuje się @import .

— Alex Sutu
źródło
0

Rozwiązałem poniższe kroki.

(1) zainstalował moduł Respond.js dla drupal 7. (2) moduł lessphp dla drupal 7 ustawiony w bibliotekach zamiast w folderze modułów. (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]-->

używając cdn bootstrap z ustawień motywu.

Aby dowiedzieć się więcej, przejrzyj mój blog na stronie poświęconej projektowaniu i rozwojowi drupal www.devangsolanki.com

— użytkownik3471193
źródło
1
W jaki sposób kroki 1 i 2 są powiązane z pytaniem? Problem dotyczy IE8 i bootstrap. Drupal nie jest nawet wspomniany w pytaniu.
— Adam Zuckerman
0

Jeśli używasz Bootstrap 3 i wszystko działa dobrze w innych przeglądarkach oprócz IE, wypróbuj poniższe.

<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
źródło
Cześć Phill Healy, rozwiązanie, które opublikowałem, zadziałało dla mnie. Twój komentarz nie jest konstruktywny. Jeśli potrzebujesz pomocy, musisz podać więcej szczegółów
— vutbao
1
Bootstrap @vutbao działa w wersjach> IE8. Jeśli chcesz, aby działał w IE8, musisz dodać odpowiedzi, ALE repondjs NIE DZIAŁA, jeśli używasz bootstrap CDN. poświęć czas na przeczytanie odpowiedzi Bassa Jobsena.
— Wreeecks
@ Vutbao, powiedzenie, że twoja odpowiedź jest ostateczną odpowiedzią na wszystkie problemy Bootstrap 3 tego rodzaju, jest nieprawidłowe. Ale tak mówi twoja odpowiedź. Jak wskazuje bwaaaaaa, istnieje wiele problemów do rozważenia. Innym problemem może być na przykład fakt, że dokument jest w trybie dziwactwa itp.
— Phill Healey
Punkt wzięty. Będę bardziej ostrożny z brzmieniem. Dzięki
— vutbao
0

Skorzystaj z tego rozwiązania 

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

Ten ciąg <script src="js/css3-mediaqueries.js"></script>włącza zapytania multimedialne. Ten ciąg<link rel="stylesheet" type="text/css" href="css/bootstrap-ie7.css" /> włącza czcionki rozruchowe.

Testowane na Bootstrap 3.3.5

Link do pobrania mediaqieries.js . Link do pobrania bootstrap-ie7.css

— AC1D
źródło
0

Pamiętaj, aby połączyć źródło ładowania początkowego osobno

Jeśli używasz LESSlub SASSnie masz ochoty na kompilowanie stylów. Do mojego projektu włączyłembootstrap.min.css w głównym stylu na górze pliku - więc powinno być tylko jedno żądanie dla wszystkich stylów.

Z tego powodu klasy boostrap nie działały poprawnie. Po dodaniu osobno działa zgodnie z oczekiwaniami.

— Atais
źródło
0

Napotkałem ten sam problem, wypróbowałem pierwszą odpowiedź, ale czegoś mi brakowało.

Jeśli używacie Webpacka, wasz css zostanie załadowany jako znacznik stylu, który nie jest obsługiwany przez respond.js, potrzebuje pliku, więc upewnij się, że bootstrap jest załadowany jako plik css

Osobiście korzystałem 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")
            }
        ]
    }
}

Mam nadzieję, że ci to pomoże

— Sami Triki
źródło
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.