Masalah IE8 dengan Twitter Bootstrap 3

228

Saya membuat situs menggunakan Bootstrap Twitter baru. Situs ini terlihat baik dan berfungsi di semua browser yang diperlukan kecuali IE8.

Di IE8 tampaknya menampilkan elemen-elemen versi mobile tetapi membentang di layar penuh desktop saya. Saya percaya masalah yang saya alami adalah bahwa bootstrap Twitter lebih dulu mobile. Jadi untuk beberapa alasan IE8 akan menggunakan opsi ini.

Saya juga memperhatikan bahwa containerkelas tampaknya tidak menarik dalam properti CSS max-width sebagaimana dimaksud. Adakah yang bisa melihat kesalahan saya?

<!-- 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
sumber
1
Selamat datang. Silakan kirim kode dalam pertanyaan juga. Ini akan membantu siapa saja yang melihat pertanyaan ini di tahun-tahun mendatang ketika tautan Anda tidak berfungsi lagi.
Mark Chorley
1
Terima kasih! Saya sudah mengeditnya sekarang, tepuk tangan.
wrayvon

Jawaban:

260

Anda mendapatkan CSS dari response.js CDN (bootstrapcdn.com) hanya berfungsi untuk file lokal. Jadi cobalah situs web Anda di IE8 dengan salinan lokal bootstrap.css. Atau baca: Pengaturan CDN / X-Domain

Catatan Lihat juga: https://github.com/scottjehl/Respond/pull/206

Memperbarui:

Silakan baca: http://getbootstrap.com/getting-started/#support

Selain itu, Internet Explorer 8 membutuhkan penggunaan response.js untuk mengaktifkan dukungan permintaan media.

Lihat juga: https://github.com/scottjehl/Respons

Untuk alasan ini templat dasar berisi garis-garis ini di bagian kepala:

<!-- 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
sumber
Tolong maafkan saya jika saya tumpul ... tapi respond.js??
Chris Kempen
6
Maaf, saya selalu menemukan solusi yang tepat setelah memposting pertanyaan konyol ... lihat getbootstrap.com/getting-started (khusus di bagian "Internet Explorer 8 dan 9"). :)
Chris Kempen
1
File mana yang harus ada secara lokal, mana yang dapat digunakan dari CDN? file bootsrap.css, bootstrap.js, response.js, html5shiv.js?
trante
3
sebuah respond.js lokal hanya bekerja dengan salinan lokal dari bootstrap (domain yang sama), lihat di sini github.com/scottjehl/Respond#cdnx-domain-setup
Bass Jobsen
6
Juga perhatikan bahwa Respond.js perlu didefinisikan setelah file css yang berisi permintaan media. Kalau tidak, mereka tidak akan diproses di IE8
helios456
62

Saya juga harus menetapkan tag META berikut:

<meta http-equiv="X-UA-Compatible" content="IE=edge">
Damian
sumber
Saya menggunakan: <div class="left-finger-picker img-responsive">untuk menampilkan gambar di mana: left-finger-pickeradalah sebagai berikut: .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; } namun, tidak responsif di IE8
Hosein Aqajani
17

Saya memiliki masalah yang sama ketika beralih dari Bootstrap 2 ke 3. Saya sudah mendapat response.js dan html5shiv.js dan mengatur meta saya ke edge. Saya melewatkan bahwa dari 2 hingga 3 tipe elemen navbar telah berubah. Di Bootstrap 2 itu nav. Di Bootstrap 3 sekarang header. Jadi untuk sepenuhnya menyelesaikan masalah saya harus

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

Letakkan ini tepat setelah saya memuat css saya:

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

dan kemudian berubah 

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

untuk

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

Oh dan untuk ukuran yang baik saya juga menambahkan

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

hanya karena itulah yang dimiliki situs Bootstrap sendiri.

Giles Roberts
sumber
Saya menggunakan: <div class="left-finger-picker img-responsive">untuk menampilkan gambar di mana: left-finger-pickeradalah sebagai berikut: .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; } namun, tidak responsif di IE8
Hosein Aqajani
14

Dalam kasus saya, bootstrap minified CSS menyebabkan masalah. Untuk membuat bootstrap 3.0.2 responsif di IE8 (ditiru menggunakan Alat Pengembang F12) saya harus:

1 - Tetapkan bendera yang Kompatibel dengan X-UA.

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

2 - Gunakan bootstrap.css non-minified, bukan bootstrap.min.css

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

3 - Tambahkan response.js (dan html5shiv.js)

<!--[if lt IE 9]>
  <script src="/js/html5shiv.min.js"></script>
  <script src="/js/respond.min.js"></script>
<![endif]-->
pedrusky
sumber
Dalam kasus saya, bootstrap minified CSS menyebabkan masalah pada IE8.
hrvoj3e
Saya menggunakan: <div class="left-finger-picker img-responsive">untuk menampilkan gambar di mana: left-finger-pickeradalah sebagai berikut: .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; } namun, tidak responsif di IE8
Hosein Aqajani
6

taruh respond.jsdi bagian bawah halaman tetapi sebelum bodytag penutup dan ini adalah tautan respond.jsdan jalankan kode ini di localhost Anda.

https://github.com/scottjehl/Respons

jignesh kheni
sumber
Terima kasih untuk ini, lupa menyebutkan, ini sudah termasuk dalam file plugins.js saya.
wrayvon
Yang penting adalah yang respond.jsharus dimuat setelah stylesheet.
piotr_cz
6

Untuk berjaga-jaga. Pastikan Anda memuat file js khusus IE setelah Anda memuat file css Anda.

TenJack
sumber
5

Jangan lupa untuk menempatkan link css Anda di <head>saat respond.jsdibutuhkan hanya mereka.

Malaikat Yordanov
sumber
5

Seperti yang dinyatakan sebelumnya ada dua masalah yang berbeda: 1) IE8 tidak mendukung permintaan media 2) response.js yang digunakan bersama dengan file css lintas-domain harus disertakan seperti yang dijelaskan sebelumnya.

Jika Anda ingin menggunakan BootstrapCDN, inilah contoh yang berfungsi:

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<!--[if lt IE 9]>
    <link href="https://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]-->

Juga pastikan untuk menyalin response.proxy.gif, response.min.js dan response.proxy.js di direktori lokal

Matteo Rossi
sumber
4

Setelah memverifikasi:

  • DOCTYPE
  • Tag meta yang kompatibel dengan X-UA
  • Termasuk html5shiv.js dan response.js (dan mengunduh versi terbaru)
  • response.js bersifat lokal
  • Situs hosting dari server web dan bukan dari File: //
  • Tidak menggunakan @import
  • ...

Masih col-lg, col-md, dan col-sm tidak berfungsi. Akhirnya saya memindahkan referensi ke bootstrap menjadi sebelum referensi ke html5shiv.js dan response.js dan semuanya bekerja.

Berikut ini cuplikannya:

<!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
sumber
2
Memindahkan bootstrap.min.css seperti yang disarankan di sini diperlukan untuk menyelesaikan masalah saya. Saya hanya memindahkan file .css, file .js masih memuat setelahnya.
Chad McGrath
Memindahkan file CSS kompilasi saya (termasuk Bootstrap) di atas html5shim dan merespons adalah solusi bagi saya - terima kasih
Friendly Code
2

Dari penjelasan itu dikatakan bahwa IE8 adalah versi standar untuk Anda dan membuat content="IE=edge"akan membuat halaman dalam mode tertinggi. Untuk membuatnya kompatibel, ubah ke content="IE=8".

Mode IE8 mendukung banyak standar yang ditetapkan, termasuk Spesifikasi W3C Cascading Style Sheets Level 2.1 dan W3C Selectors API; itu juga menyediakan dukungan terbatas untuk Spesifikasi Level 3 W3C Cascading Style Sheets (Working Draft) dan standar yang muncul lainnya.

Mode Edge memberitahu Internet Explorer untuk menampilkan konten dalam mode tertinggi yang tersedia. Dengan Internet Explorer 9, ini setara dengan mode IE9. Jika rilis Internet Explorer di masa mendatang mendukung mode kompatibilitas yang lebih tinggi, halaman yang diatur ke mode tepi akan muncul dalam mode tertinggi yang didukung oleh versi itu. Halaman yang sama akan tetap muncul dalam mode IE9 bila dilihat dengan Internet Explorer 9.

Referensi Apa yang <meta http-equiv = "Kompatibel dengan X-UA" content = "IE = edge"> lakukan?

Keluwesan
sumber
1

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

Saya menggunakan Bootstrap 3 - memilikinya bekerja pada IE di lokal saya.

Saya membuatnya hidup tidak bekerja di IE.

Hanya Bootstrap yang tidak menyertakan baris kode dalam templatnya, saya tidak yakin mengapa, tetapi mungkin karena tidak kompatibel dengan W3C.

Getsomepeaches
sumber
1

Saya memiliki perbaikan untuk masalah ini. Sebenarnya IE7 dan 8 tidak mendukung @ media dengan benar dan jika Anda memeriksa css untuk kelas “col-md- *” dan lebar di sana diberikan dalam lebar media 992px. Cukup buat file css baru IE misalnya: IE.css dan tambahkan komentar bersyarat. Dan kemudian salin kelas yang diperlukan untuk desain Anda secara langsung dengan pertanyaan media apa pun di sana dan Anda selesai.

Denise
sumber
0

Saya memiliki masalah yang persis sama ketika bermigrasi dari bootstrapv2 ke v3.

Jika (seperti saya) Anda bermigrasi dengan mengganti spanX lama dengan col-sm-X Anda juga perlu menambahkan kelas col-X. col-X adalah gaya yang berada di luar blok @ media mana pun yang berfungsi tanpa dukungan kueri media.

Untuk memperbaiki lebar kontainer, Anda dapat mengaturnya sendiri di luar blok @ media. Sesuatu seperti:

.container {
  max-width: @container-tablet;
}
@import "twitter-bootstrap/less/bootstrap";
andyberry88
sumber
Ok, jadi ternyata 100% tidak menyelesaikan masalah karena kelas col-X kemudian digunakan untuk perangkat seluler. Kembali ke papan gambar ...
andyberry88
kelas col-X tidak akan pernah menumpuk, jadi solusi Anda akan memiliki masalah pada perangkat kecil. Solusi Anda juga tidak memperbaiki masalah dengan @ grid-float-breakpoint yang juga tergantung pada permintaan media, jadi navbar Anda tidak akan menjadi horizontal. Lihat juga: stackoverflow.com/a/17920693/1596547
Bass Jobsen
0

Saya mengalami masalah yang sama di IE 10.0. Saya tahu ini bukan masalah di OP, tapi mungkin itu akan bermanfaat bagi orang lain.

Dalam kasus saya, saya memiliki garis kosong di awal dokumen:

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

Jika garis kosong antara DOCTYPE dan tag, masalahnya juga ditunjukkan:

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

Setelah saya menghapus baris kosong, dan tanpa sihir meta Kompatibel X-UA, IE 10 telah mulai membuat situs dengan benar.

Jika Anda menggunakan PHP dan Smarty berhati-hatilah dengan komentar Smarty Anda karena mereka akan menambahkan baris kosong yang bermasalah :-)

Googol
sumber
0

tag kepala saya seperti ini:

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

jika Anda ingin mencoba di lokal ... coba melalui localhost, atau buat server QA dan atur konten dan coba.

Kita perlu response.js untuk bootstrap 3 dan itu tidak akan bekerja di mesin lokal jika kita hanya memasukkannya di js dan menambahkannya ke html di header. Itu akan mengatakan akses ditolak. ini hanya berfungsi melalui server karena IE memiliki batasan keamanan. : P

sandeepnpn
sumber
0

Saya sudah membaca setiap komentar di sini, mencoba semuanya .. tetapi tidak bisa berfungsi dengan Windows 7 - Internet Explorer 11 ( dengan mode dokumen: IE8 ).

Kemudian terlintas dalam pikiran bahwa menjalankan mode dokumen (IE8) tidak sama dengan IE8 yang asli, jadi saya menginstal Windows Virtual PC ( Windows 7 dengan Internet Explorer 8 ) dan tadaaaa ... berfungsi seperti pesona!

Saya telah meletakkan kode ini HANYA di bagian bawah halaman untuk membuatnya berfungsi:

<!-- 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
sumber
Respond.js dan file proxy juga di-host di cdnjs.cloudflare.com. periksa cdnjs.com/libraries/respond.js untuk dokumen / tautan, dan bootstrap 3.03 juga terdapat di sana: cdnjs.com/libraries/twitter-bootstrap
Troy Morehouse
0

Sama seperti kepala. Saya memiliki masalah yang sama dan tidak ada yang diperbaiki untuk saya. Akhirnya saya mengetahui bahwa response.js tidak mem-parsing CSS yang dirujuk melalui @import . Saya memiliki seluruh bootstrap.min.cssimpor melalui @importke saya main.css.

Jadi, pastikan Anda tidak memiliki CSS yang berisi kueri media yang dirujuk melalui @import .

Alex Sutu
sumber
0

Saya telah menyelesaikan langkah-langkah di bawah ini.

(1) memasang modul Respond.js untuk drupal 7. (2) modul lessphp untuk drupal 7 diatur di perpustakaan, alih-alih folder modul. (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]-->

menggunakan cdn bootstrap dari pengaturan tema.

Untuk mempelajari lebih lanjut, tinjau blog situs web saya untuk desain dan pengembangan drupal www.devangsolanki.com

pengguna3471193
sumber
1
Bagaimana langkah 1 dan 2 terkait dengan pertanyaan itu? Masalahnya adalah dengan IE8 dan bootstrap. Drupal bahkan tidak disebutkan dalam pertanyaan.
Adam Zuckerman
0

Jika Anda menggunakan Bootstrap 3 dan semuanya berfungsi dengan baik di browser lain kecuali IE, coba di bawah ini.

<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
sumber
Hai Phill Healy, solusi yang saya posting berhasil untuk saya. Komentar Anda tidak konstruktif. Anda harus memberikan rincian lebih lanjut jika Anda ingin bantuan
vutbao
1
@vutbao bootstrap berfungsi pada versi> IE8. Jika Anda ingin bekerja di IE8, Anda perlu menambahkan responsejs TAPI repondjs TIDAK AKAN BEKERJA jika Anda menggunakan bootstrap CDN. luangkan waktu untuk membaca jawaban Bass Jobsen.
Wreeecks
@Vutbao, untuk mengatakan bahwa jawaban Anda adalah jawaban pasti untuk semua masalah Bootstrap 3 semacam ini tidak benar. Namun, itulah jawaban Anda. Sebagai bwaaaaaa menunjukkan ada banyak masalah untuk dipertimbangkan. Masalah lain misalnya, mungkin dokumennya dalam mode quirks, dll.
Phill Healey
Poin yang diambil. Saya akan lebih berhati-hati dengan kata-katanya. Terima kasih
vutbao
0

Gunakan solusi ini 

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

String ini <script src="js/css3-mediaqueries.js"></script>mengaktifkan permintaan media. String ini <link rel="stylesheet" type="text/css" href="css/bootstrap-ie7.css" />mengaktifkan font bootstrap.

Diuji pada Bootstrap 3.3.5

Tautan untuk mengunduh mediaqieries.js . Tautan untuk mengunduh bootstrap-ie7.css

AC1D
sumber
0

Pastikan Anda menautkan sumber bootstrap secara terpisah

Jika Anda menggunakan LESSatau SASStidak untuk serakah dengan mengkompilasi gaya. Dalam proyek saya, saya termasuk bootstrap.min.cssdalam gaya utama saya, di bagian atas file - jadi seharusnya hanya ada satu permintaan untuk semua gaya.

Dan karena itu, kelas boostrap tidak berfungsi dengan baik. Ketika ditambahkan secara terpisah, berfungsi seperti yang diharapkan.

Atais
sumber
0

Saya menghadapi masalah yang sama, mencoba jawaban pertama tetapi ada sesuatu yang hilang.

Jika Anda menggunakan Webpack, css Anda akan dimuat sebagai tag gaya yang tidak didukung oleh response.js, itu membutuhkan file, jadi pastikan bootstrap dimuat sebagai file css

Secara pribadi saya menggunakan 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")
            }
        ]
    }
}

Semoga ini bisa membantu Anda

Sami Triki
sumber