Rumah >hujung hadapan web >tutorial css >Mengapa Laman Twitter Bootstrap 3 Saya Memaparkan Elemen Mudah Alih dalam IE8 pada Desktop?
IE8 dengan Twitter Bootstrap 3 Isu
Penerangan Masalah
Twitter Bootstrap 3 memaparkan tapak mudah alih elemen dalam IE8, walaupun berjalan pada desktop. Masalahnya nampaknya berpunca daripada IE8 memilih versi mudah alih, mungkin disebabkan reka bentuk Bootstrap yang mengutamakan mudah alih. Selain itu, kelas kontena nampaknya tidak menggunakan sifat CSS lebar maksimum dengan betul.
Kod HTML
<header> <div class="topArea clearfix"> <div class="container"> <div class="topLinks"> <div class="btn-group"> <span class="flag" data-toggle="dropdown"></span> <ul class="dropdown-menu"> ... </ul> </div> ... <div class="topNav"> <ul class="hidden-sm"> ... <li> <a href="#"> <button type="button" class="btn btn-default">Where to Buy</button> </a> </li> </ul> </div> ... </div> </div> </div> <div class="mainNavArea"> <div class="container rel"> ... <div class="navi"> <div class="navbar"> <div class="container"> ... <div class="nav-collapse collapse navbar-responsive-collapse"> <ul class="nav nav-justified"> ... <li> <a href="#"> <button type="button" class="btn btn-default">Where to Buy</button> </a> </li> </ul> </div> </div> </div> </div> </div> </div> </header>
Kod CSS
.container { max-width: 960px; }
Jawapan
Isunya timbul kerana kod tersebut menggunakan fail CSS yang dihoskan CDN, yang tidak serasi dengan Respond.js IE8 untuk mendayakan sokongan pertanyaan media.
Penyelesaian
Untuk menyelesaikan isu, ikut langkah berikut:
<!--[if lt IE 9]> <script src="../../assets/js/html5shiv.js"></script> <script src="../../assets/js/respond.min.js"></script> <![endif]-->
Atas ialah kandungan terperinci Mengapa Laman Twitter Bootstrap 3 Saya Memaparkan Elemen Mudah Alih dalam IE8 pada Desktop?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!